syncfusion-react-barcode

Q: How do I install syncfusion-react-barcode?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-barcode in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-barcode/ (personal) or .claude/skills/syncfusion-react-barcode/ (project).

by syncfusionFrontend & Design

Generate, customize, and export barcodes in React using Syncfusion BarcodeGenerator. Trigger for requests involving Code39 or Code128 barcodes, QR codes, Data Matrix generation, barcode styling (size, color, text, margins), React component setup, props or events, SVG or canvas rendering, and exporting or printing barcode images.

Installs: 712
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-barcode

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-react-barcode automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing Syncfusion React Barcode

When to Use This Skill

Use this skill when you need to:

Generate barcodes (Code39, Code128, Code11, Code32, Code93, Codabar) in React
Create QR codes for URLs, contact info, or product identification
Generate Data Matrix codes for labels, tracking, or inventory
Customize barcode appearance (size, color, text display)
Export barcodes as images (JPG, PNG) or base64 strings
Integrate barcode generation into forms, reports, or applications

Library Overview: Three Generator Types

Syncfusion React Barcode provides three main components:

BarcodeGeneratorComponent - Traditional 1D barcodes (Code39, Code128, etc.)
- Character encoding varies by type
- Ideal for: Product codes, inventory, retail
- Readability: High, works with basic scanners
QRCodeGeneratorComponent - 2D Quick Response codes
- Versions 1-40 with automatic scaling
- Ideal for: URLs, contact info, product links, advertising
- Capacity: Up to thousands of characters
DataMatrixGeneratorComponent - 2D Data Matrix codes
- Square/rectangular format, compact size
- Ideal for: Labels, parts tracking, aerospace/automotive
- Capacity: Alphanumeric data, efficient encoding

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and dependencies
Vite/React setup
Component imports and basic structure
Parent component initialization

Barcode Generator Types

📄 Read: references/barcode-generator.md

Code39, Code39Extended, Code11, Code128, Code32, Code93, Codabar
When to use each type
Character set support per type
Encoding and checksum information
Implementation examples for each

QR Code Generator

📄 Read: references/qr-code-generator.md

QR Code basics and versions
Automatic version selection
Character encoding (numeric, alphanumeric, JIS8)
Common use cases and patterns
Implementation with different data types

Data Matrix Generator

📄 Read: references/data-matrix-generator.md

Data Matrix basics and structure
Encoding rules and character support
Size and capacity considerations
Label and printing applications
Comparison with other barcode types

Customization and Styling

📄 Read: references/customization.md

Barcode dimensions (width, height)
Colors (foreColor, backgroundColor)
Display text customization
Examples of size and color variations
Responsive design patterns

Export and Integration

📄 Read: references/export-and-integration.md

Export as image (JPG, PNG)
Export as base64 string
Method: exportImage(filename, format)
Method: exportAsBase64Image(format)
Integration with forms, APIs, and reports

Quick Start Examples

Code39 Barcode

import React from 'react';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <BarcodeGeneratorComponent
      id="barcode"
      type="Code39"
      value="SYNCFUSION"
      width="200px"
      height="150px"
    />
  );
}

QR Code

import React from 'react';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <QRCodeGeneratorComponent
      id="qrcode"
      value="https://www.syncfusion.com"
      width="200px"
      height="200px"
    />
  );
}

Data Matrix

import React from 'react';
import { DataMatrixGeneratorComponent } from '@syncfusion/ej2-react-barcode-generator';

export default function App() {
  return (
    <DataMatrixGeneratorComponent
      id="datamatrix"
      value="Syncfusion"
      width="200px"
      height="200px"
    />
  );
}

Common Patterns

Pattern 1: Dynamic Value Generation

const [barcodeValue, setBarcodeValue] = React.useState('DEFAULT123');

<BarcodeGeneratorComponent
  type="Code128"
  value={barcodeValue}
  width="200px"
  height="150px"
/>

Pattern 2: Export on Button Click

const barcodeRef = React.useRef();

const handleExport = () => {
  barcodeRef.current.exportImage('barcode', 'PNG');
};

<div>
  <BarcodeGeneratorComponent
    ref={barcodeRef}
    type="Code39"
    value="SYNC123"
    width="200px"
    height="150px"
  />
  <button onClick={handleExport}>Download Barcode</button>
</div>

Pattern 3: Styled Container

<div style={{ padding: '20px', border: '1px solid #ddd' }}>
  <QRCodeGeneratorComponent
    value="https://example.com"
    width="250px"
    height="250px"
    foreColor="#333"
    backgroundColor="#fff"
  />
</div>

Key Props

Prop	Description	Used By
`type`	Barcode type (Code39, Code128, Code11, Code32, Code93, Codabar)	BarcodeGeneratorComponent
`value`	Data to encode	All generators
`width`	Barcode width (string with px)	All generators
`height`	Barcode height (string with px)	All generators
`foreColor`	Dark/bar color	All generators
`backgroundColor`	Light/space color	All generators
`displayText`	Object to customize display text	All generators
`id`	Unique component identifier (required for export)	All generators

Common Use Cases

Retail & Inventory: Code128 barcodes for products and SKUs
E-commerce: QR codes linking to product pages or reviews
Logistics: Data Matrix for package tracking and labels
Document Management: QR codes embedding document metadata
Marketing: Dynamic QR codes with analytics
Healthcare: Code128/Code39 for specimen/patient labeling
Form Workflows: Export barcodes for printing or archival

Next Steps

Choose your generator type based on use case
Read the getting started guide
Review the specific generator documentation
Customize appearance as needed
Implement export if required for your workflow

FAQ

What does the syncfusion-react-barcode skill do?

How do I install syncfusion-react-barcode?

Run npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-barcode in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-react-barcode/ (personal) or .claude/skills/syncfusion-react-barcode/ (project).

Which AI agents can use syncfusion-react-barcode?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-react-barcode safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-react-barcode?

It is published by syncfusion in syncfusion/react-ui-components-skills. It has 712 recorded installs.