next-barcode

React hooks for generating Barcode for your next React apps.

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.

🌟 Contribution

We'd love to have your helping hand on contributions to next-barcode by forking and sending a pull request!

Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)

How to contribute:

• Open pull request with improvements
• Discuss ideas in issues
• Spread the word
• Reach out with any feedback

🏆 Contributors

⚖️ License

The MIT License