react-barcode

What is react-barcode?

The react-barcode package is a React component that allows you to generate barcodes in your React applications. It provides a simple interface to create various types of barcodes with customizable options.

What are react-barcode's main functionalities?

Generate Barcode

This feature allows you to generate a barcode by providing a value. The code sample demonstrates how to create a simple barcode with the value '1234567890'.

<Barcode value='1234567890' />

Customize Barcode

This feature allows you to customize the barcode by specifying options such as format, width, height, and whether to display the value. The code sample shows how to create a CODE128 barcode with specific dimensions and without displaying the value.

<Barcode value='1234567890' format='CODE128' width={2} height={100} displayValue={false} />

Other packages similar to react-barcode

jsbarcode

JsBarcode is a popular library for generating barcodes in JavaScript. It is not specifically designed for React, but it can be used in React applications. Compared to react-barcode, JsBarcode offers more flexibility and supports a wider range of barcode formats.

react-qr-barcode-scanner

This package provides a React component for scanning QR codes and barcodes. While it focuses more on scanning capabilities rather than generating barcodes, it can be a complementary tool for applications that require both generation and scanning functionalities.

README

react-barcode

Preview: http://kciter.github.io/react-barcode/

A <Barcode/> component for use with React.
This library wrapped JsBarcode.

Installation

npm install react-barcode

Usage

var React = require('react');
var ReactDOM = require('react-dom');
var Barcode = require('react-barcode');

ReactDOM.render(
  <Barcode value="http://github.com/kciter" />,
  mountNode
);

Or

import Barcode from 'react-barcode';

export const Example: FunctionComponent = () => {
    return <Barcode value="barcode-example" />;
};

Options:

For information about how to use the options, see the wiki page.

{
  width: 2,
  height: 100,
  format: "CODE128",
  displayValue: true,
  fontOptions: "",
  font: "monospace",
  textAlign: "center",
  textPosition: "bottom",
  textMargin: 2,
  fontSize: 20,
  background: "#ffffff",
  lineColor: "#000000",
  margin: 10,
  marginTop: undefined,
  marginBottom: undefined,
  marginLeft: undefined,
  marginRight: undefined,
  id: undefined,
  className: undefined
}

Reference

• https://github.com/lindell/JsBarcode
• https://github.com/zpao/qrcode.react

Donate

If you like this open source, you can sponsor it. :smile:

Paypal me

Licence

Copyright (c) 2016, Lee Sun-Hyoup

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.