HelpBot Assistant

How can I help you?

Getting Started with the React Barcode Component

10 Feb 202613 minutes to read

This section explains the steps required to create a simple barcode and demonstrates the basic usage of the barcode control.

Dependencies

The following packages are the minimum dependencies required to use the barcode component:


|-- @syncfusion/ej2-react-barcode-generator
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-barcode-generator
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Installation and Configuration

To set up a React application, we recommend using Vite, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

JavaScript Environment

Run the following command in PowerShell:

npm create vite@latest my-app -- --template react

You will see interactive prompts:

│
◇  Use rolldown-vite (Experimental)?:
│  > No  ✓ (Recommended for stable projects)
│
◇  Install with npm and start now?
│  > No (or Yes)

If you select “No” for “Install with npm and start now?”, follow these manual steps:

cd my-app
npm install
npm run dev

If you select “Yes” for “Install with npm and start now?”, npm will automatically install dependencies and start the dev server. No further commands are needed.

TypeScript Environment

Run the following command in PowerShell:

npm create vite@latest my-app -- --template react-ts

You will see interactive prompts:

│
◇ Use rolldown-vite (Experimental)?:
│  > No  ✓ (Recommended for stable projects)
│
◇  Install with npm and start now?
│  > No (or Yes)

If you select “No” for “Install with npm and start now?”, follow these manual steps:

cd my-app
npm install
npm run dev

If you select “Yes” for “Install with npm and start now?”, npm will automatically install dependencies and start the dev server. No further commands are needed.

Adding Syncfusion® Packages

All the available Essential® JS 2 packages are published in the npmjs.com public registry.

To install the barcode generator package, run the following command:

npm install @syncfusion/ej2-react-barcode-generator --save

Adding Barcode Component to the Application

To integrate the Barcode component into your application, import the BarcodeGeneratorComponent from the @syncfusion/ej2-react-barcode-generator package and add it to your component as demonstrated below.

[src/App.jsx]

import './App.css';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
function App() {
  return (
    <div className="App">
        <BarcodeGeneratorComponent 
        id="barcode" 
        width={"200px"} 
        height={"150px"} 
        type='Codabar'
         value='123456789'></BarcodeGeneratorComponent>
    </div>
  );
}
export default App;

Adding Barcode Generator Control

The following example demonstrates how to generate various barcode types using the Barcode Generator component:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<BarcodeGeneratorComponent id="barcode" width={"200px"} height={"150px"} type='Codabar' value='123456789'></BarcodeGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { BarcodeGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <BarcodeGeneratorComponent
    id="barcode"
    width={"200px"}
    height={"150px"}
    type='Codabar'
    value='123456789'
    ></BarcodeGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion® React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Adding QR Code Generator Control

The following example demonstrates how to generate QR codes using the Barcode Generator component:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<QRCodeGeneratorComponent id="barcode" width={"200px"} height={"150px"} value='Syncfusion'></QRCodeGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { QRCodeGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <QRCodeGeneratorComponent
    id="barcode"
    width={"200px"}
    height={"150px"}
    value='Syncfusion'
    ></QRCodeGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion® React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Adding Data Matrix Generator Control

The following example demonstrates how to generate Data Matrix codes using the Barcode Generator component:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
ReactDOM.render(<DataMatrixGeneratorComponent id="barcode" width={"200px"} height={"150px"} value='Syncfusion'></DataMatrixGeneratorComponent>, document.getElementById("barcode"));
import * as React from "react";
import * as ReactDOM from "react-dom";
 import { DataMatrixGeneratorComponent  } from '@syncfusion/ej2-react-barcode-generator';


ReactDOM.render(
 <DataMatrixGeneratorComponent
    id="barcode"
    width={"200px"}
    height={"150px"}
     value='Syncfusion'
    ></DataMatrixGeneratorComponent>,
  document.getElementById("barcode")
);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion® React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .barcodeStyle{
            height: 150px;
            width: 200px;
            padding-left: 40%;
            padding-top: 9%;
         }

    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='barcode'class="barcodeStyle">
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>