ts-barcode-generator
v0.0.3
Published
Simple Barcode Generator created in TypeScript
Downloads
12
Maintainers
Readme
SVG Barcode Generator written in TypeScript
Simple barcode generator for frameworks like React, Preact, Qwik, Svelte, etc.
Created to be lightweight and easy to use.
Generated 1D barcodes can be resized freely horizontally and vertically. By default, they will take on the size of the parent element. QR codes will be scalable, preserve aspect ratio and their size also depends on width of parent element.
Why to use this library
- Creates responsive SVG graphics.
- Is TailwindCSS friendly (you can easily apply colors).
- Is Dependency-free
Why you shouldn't use this library
Whether the project will be developed further depends on my willingness to work. EAN13 might be the only supported format.
Idea
There was no browser API that I could use for generating 1D/2D barcodes in my projects. Among the libraries available on NPM, I found only one decent library that is written in pure JavaScript - bwip-js, which unfortunately does not have tree shaking. Bundled in my Vite project it takes about 230 kilobytes Gzipped.
So, as part of my TypeScript learning journey (and programming in general), I decided to see if I could create such a generator with the help of ChatGPT and GitHub Copilot. At the beginning, I will focus on the most important types of codes for me: EAN13 and QR.
Usage
Common
import TsBarcodeGenerator from 'ts-barcode-generator';
const barcode = TsBarcodeGenerator.generate('7423522549551', 'EAN13');
console.log(barcode);
React/Preact + TailwindCSS
import TsBarcodeGenerator from 'ts-barcode-generator';
export const YourComponent = () => {
const barcode = TsBarcodeGenerator.generate('7423522549551', 'EAN13');
return (
<div className='p-6 bg-white fill-current text-black'>
<div dangerouslySetInnerHTML={{ __html: barcode }} />
</div>
);
};
Supported code formats
- EAN13
- UPC
Planned code formats
- Simple 1D barcodes like Code 128, Code 39, etc.
- QR Code (I already tried to implement it without success, it's challenging)
Materials you can check before use
Support the project
If you see potential in this project and want to help - feel free to contribute. Any help is welcome.
You can contact me on Discord: avaray_
You can find me on servers like: Astro Lounge, Anthony's, Programowanko TSH.io.