Getting Started

27 Jun 202511 minutes to read

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

Dependencies

Below is the list of 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 easily set up a React application, use create-vite-app, 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.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Adding Syncfusion® packages

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

npm install @syncfusion/ej2-react-barcodegenerator --save

Adding Barcode Generator control

You can start adding Essential® JS 2 barcode-generator component to the application. To get started, add the barcode component in app.tsx and index.html files using the following code.

Place the following barcode-generator code in the app.tsx.

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 Generator control

You can add the QR code in our 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 Datamatrix Generator control

You can add the datamatrix code in our 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>