Setup

Install

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

npm install react-barcodes --save

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

yarn add react-barcodes

Usage

SVG

import React from 'react';
import { useBarcode } from 'react-barcodes';

function App() {
  const { inputRef } = useBarcode({
    value: 'react-barcodes',
    options: {
      background: '#ccffff',
    }
  });
  
  return <svg ref={inputRef} />;
};

export default App;

Canvas

import React from 'react';
import { useBarcode } from 'react-barcodes';

function App() {
  const { inputRef } = useBarcode({
    value: 'react-barcodes',
    options: {
      displayValue: false,
      background: '#ffc0cb',
    }
  });
  
  return <canvas ref={inputRef} />;
};

export default App;

Image

import React from 'react';
import { useBarcode } from 'react-barcodes';

function App() {
  const { inputRef } = useBarcode({
    value: 'react-barcodes',
    options: {
      background: '#ffff00',
    }
  });
  
  return <img ref={inputRef} />;
};

export default App;