The easiest way to generate Barcode with react-barcode

Overview

react-barcode component is a light-weight and high-performance component that displays industry-standard 1D and 2D barcodes for React app. Generated barcodes are optimized for printing and on-screen scanning. It is designed for ease of use and does not require fonts.

Live demo

Customization

react-barcode component is easily customizable. It provides options to customize its color, height, width, and more.

Label

react-barcode provides an option to display a barcode with or without text along with alignment options for React.

Type

react-barcode supports wide a range of types.

Features

• Compatible with both JavaScript and TypeScript
• Generate as SVG, Canvas and Image
• Support multiple barcodes type

Installation

react-barcode is available on npm. It can be installed with the following command:

npm install --save @createnextapp/react-barcode

react-barcode is available on yarn as well. It can be installed with the following command:

yarn add @createnextapp/react-barcode

Usage

SVG

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

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ccffff',
    }
  });

  return <svg ref={inputRef} />;
};

export default App;

Canvas

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

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });

  return <canvas ref={inputRef} />;
};

export default App;

Image

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

function App() {
  const { inputRef } = useBarcode({
    value: 'createnextapp',
    options: {
      background: '#ffff00',
    }
  });

  return <img ref={inputRef} />;
};

export default App;

To learn more how to use react-barcode:

• Documentation