React-barcodes NPM

react-barcodes

React hooks for generating Barcodes.

Live demo

🎁 Features

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

Barcodes Type

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

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

Parameters

Options

💖 Wrap Up

If you think any of the react-barcodes can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.