ts-barcode-generator

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

• Color Selection for Barcode Symbols
• Barcode Symbology
• Wikipedia.org/Barcode

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.