Getting started with React Barcode component

30 Jul 2021 / 2 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-barcodegenerator
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-barcodegenerator
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-svg-base

Installation and configuration

You can use create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

To setup basic React sample use following commands.

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

npm install

create-react-app quickstart

cd quickstart

Install Syncfusion packages using below command.

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.ts and index.html files using the following code.

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

Source

Preview

index.jsx

index.tsx

index.html

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>
</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.

Source

Preview

index.jsx

index.tsx

index.html

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>
</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.

Source

Preview

index.jsx

index.tsx

index.html

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>
</head>

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

</html>

Contents

Dependencies
Installation and configuration
Adding Barcode Generator control
Adding QR Generator control
Adding Datamatrix Generator control

Contents

Dependencies
Installation and configuration
Adding Barcode Generator control
Adding QR Generator control
Adding Datamatrix Generator control