syncfusion-react-barcode
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 exporti
By syncfusion · 613 installs
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode
Source repository · Upstream listing
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:
1. BarcodeGeneratorComponent Traditional 1D barcodes (Code39, Code128, etc.)
Character encoding varies by type
Ideal for: Product codes, inventory, retail
Readability: High, works with basic scanners
2. 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
3. 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](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](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](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](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](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](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
QR Code
Data Matrix
Common Patterns
Pattern 1: Dynamic Value Generation
Pattern 2: Export on Button Click
Pattern 3: Styled Container
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
1. Retail & Inventory : Code128 barcodes for products and SKUs
2. E commerce : QR codes linking to product pages or reviews
3. Logistics : Data Matrix for package tracking and labels
4. Document Management : QR codes embedding document metadata
5. Marketing : Dynamic QR codes with analytics
6. Healthcare : Code128/Code39 for specimen/patient labeling
7. Form Workflows : Export barcodes for printing or archival
Next Steps
1. Choose your generator type based on use case
2. Read the getting started guide
3. Review the specific generator documentation
4. Customize appearance as needed
5. Implement export if required for your workflow