Full-featured Barcode Generator For React

A powerful React component to generate highly customizable barcodes using SVG, Canvas, or regular Image.

Supported Barcode Types:

• CODE128 (automatic mode switching)
• CODE128 A/B/C (force mode)
• EAN-13
• EAN-8
• EAN-5
• EAN-2
• UPC (A)
• UPC (E)
• CODE39
• ITF
• ITF-14
• MSI10
• MSI11
• MSI1010
• MSI1110
• Pharmacode
• Codabar

Install & Download:

# Yarn
$ yarn add @createnextapp/react-barcode

# NPM
$ npm install @createnextapp/react-barcode --save

Basic Usage:

1. Import the React barcode component:

import { useBarcode } from '@createnextapp/react-barcode';

2. A simple example showing how to generate a barcode on the app.

function App() {
  const { inputRef } = useBarcode({
    value: 'reactscript',
    options: {
      // customations here
    }
  });
  // SVG Barcode
  return <svg ref={inputRef} />;
  // Or Canvas Barcode
  return <canvas ref={inputRef} />;
  // Or Image Barcode
  return <img ref={inputRef} />;
};
export default App;

3. Possible options to customize the barcode.

format?: string; // barcode type to use
width?: number;
height?: number;
displayValue?: boolean;
text?: string;
fontOptions?: string;
font?: string;
textAlign?: string;
textPosition?: string;
textMargin?: number;
fontSize?: number;
background?: string;
lineColor?: string;
margin?: number;
marginTop?: number;
marginBottom?: number;
marginLeft?: number;
marginRight?: number;
flat?: boolean; // for EAN8 or EAN13

Preview:

Download Details:

Author: createnextapp

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/createnextapp/react-barcode

License: MIT