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 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


Full-featured Barcode Generator For React

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

You Might Be Interested In:


Add Comment