How to create barcode in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To create a barcode in React js, you have to use import react-barcode. It will create a barcode in react js.

Today, I am going to show you, how to create barcode in react js.

Table of contents

• Install a Barcode Generator Library.
• Import necessary components.
• Use the Barcode Component.

Let’s start with the first step.

Step 1: Install a Barcode Generator Library.

To create a React JS app, you have to install react-barcode.

npm install --save react-barcode

Step 2: Import the Barcode Component.

You have to import the barcode component, which you can use in your React component. Barcode takes two support components: value and format.

import Barcode from 'react-barcode';

Step 3: Use the Barcode Component.

In this example, you want to be a React component that displays a barcode with the value "1234567890".

<div>
  <Barcode value="1234567890" width={2} height={100} fontSize={40} textMargin={10} displayValue={true} />
</div>

ReactJS create barcode example.

The below code is an example of, the Barcode component will render a black and white barcode.

App.js

import Barcode from 'react-barcode';
function App() {
    return (
      <div>
        <Barcode value="1234567890" width={2} height={100} fontSize={40} textMargin={10} displayValue={true} />
      </div>
    );
  }
  
export default App;

Check the output of the above code example.

Here, we are provided code sandbox links for the above program create barcode in React js. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍