Next-barcode NPM

next-barcode

React hooks for generating Barcode for your next React apps.

npm bundle size

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

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

npm install next-barcode --save

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

yarn add next-barcode

💡 Usage

SVG

import React from 'react';
import { useBarcode } from 'next-barcode';

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

export default App;

Canvas

import React from 'react';
import { useBarcode } from 'next-barcode';

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

export default App;

Image

import React from 'react';
import { useBarcode } from 'next-barcode';

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

export default App;

Parameters

Options

📜 Changelog

Latest version 1.5.0 (2023-07-14):

Upgrade dependencies

Details changes for each release are documented in the CHANGELOG.md.

❗ Issues

If you think any of the next-barcode 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.