React Barcode Generator Component

The React Barcode (QR Code) Generator Component is a light-weight and high-performance control that displays industry-standard 1D and 2D barcodes in Angular applications. Generated barcodes are optimized for printing and on-screen scanning. It is designed for ease of use and does not require fonts.

Getting started .
Online demos .
Learn more

Trusted by the world's leading companies

Setup

$3

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

``bash
npx create-react-app my-app --template typescript
cd my-app
npm start
`

$3

All Syncfusion react packages are published in the npmjs.com registry. To install the react barcode generator package, use the following command.

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

$3

In the src/App.tsx file, use the following code snippet to render the Syncfusion Barcode component

`typescript
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';
import * as React from 'react';
import './App.css';

function App() {
return id="barcode"
width={'200px'}
height={'150px'}
type="Ean8"
value="11223344">
};
export default App;
``

Supported frameworks

Barcode component is also offered in the following list of frameworks.

|
     JavaScript     |
       Angular       |
       Vue          |
  ASP.NET Core   |
  ASP.NET MVC   |
| :-----: | :-----: | :-----: | :-----: | :-----: |

Showcase samples

* Loan Calculator - Source, Live Demo
* Fitness Tracker - Source, Live Demo

Key features

* Barcode Symbologies - Supports a wide range of barcode symbologies, including:
* QR Code
* Data Matrix
* Code 39
* Code 39 Extended
* Codabar
* Code 32
* Code 93
* Code 128
* Code 128A
* Code 128B
* Code 128C
* EAN-8
* EAN-13
* UPC-A
* UPC-E
* Text Customization - Allows you to customize the text displayed.
* Exporting - Barcode can be exported as .png or .jpeg fromat image and can also be exported as base64 string.

Support

Product support is available through the following mediums.

* Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* Community forum
* GitHub issues
* Request feature or report bug
* Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

> This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ React UI components, you can purchase or start a free 30-day trial.

> A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2026 Syncfusion^® Inc. All Rights Reserved. The Syncfusion^® Essential Studio^® license and copyright applies to this distribution.