A comprehensive QR code and barcode scanning/generation library for React. Works with or without Capacitor. Supports 22+ QR data types and 14+ barcode formats (EAN, UPC, Code 128, etc.), with customizable designs, analytics, and React components. Provider
npm install code-craft-studio| Resource | Description |
| ------------------------------------------------------------------------------ | ------------------------------------------------------- |
| ๐ API Reference | Complete API documentation with all methods and options |
| ๐ Quick Start Guide | Get started in 5 minutes |
| ๐๏ธ Architecture | Plugin architecture and design decisions |
| โจ Features | Detailed feature documentation |
| ๐ฎ Interactive Playground | Try the API in your browser |
| ๐ฑ Platform Setup | iOS and Android configuration |
| ๐ฅ Video Tutorials | Step-by-step video guides |
- ๐ท QR Code Scanner: Native camera-based scanning with web fallback
- ๐ Barcode Scanner: Scan 14+ barcode formats (EAN, UPC, Code 128, etc.)
- ๐จ QR Code Generator: Generate QR codes with full customization options
- ๐ Barcode Generator: Generate 1D and 2D barcodes with text overlay
- ๐ Analytics & History: Track scans, locations, and user engagement
- ๐พ Multiple Export Formats: PNG, JPG, SVG, JSON, WebP (PDF, GIF, EPS, WMF coming soon)
- โ๏ธ React Components: Ready-to-use components for quick integration
- ๐ฑ Cross-Platform: Works on Web, iOS, and Android
- ๐ Plugin Architecture: Easy to extend and customize
#### QR Code Types
- ๐ Web & Links: Website, PDF, Images Gallery, Video, Links List
- ๐ฑ Social Media: Facebook, Instagram, WhatsApp, Social Media Hub
- ๐ผ Business: vCard, Business Info, Menu, Coupon
- ๐ง Utilities: WiFi, MP3, Apps, Text, Email, SMS, Phone, Location, Event
- ๐ฏ Custom: Any custom data format
#### Barcode Formats
- ๐ 1D Barcodes:
- EAN-13, EAN-8 (European Article Number)
- UPC-A, UPC-E (Universal Product Code)
- Code 128 (High-density alphanumeric)
- Code 39, Code 93 (Alphanumeric with special characters)
- ITF/ITF-14 (Interleaved 2 of 5)
- Codabar (Numeric with special start/stop characters)
- ๐ฒ 2D Barcodes:
- QR Code (Quick Response)
- Data Matrix (Compact 2D barcode)
- PDF417 (Stacked linear barcode)
- Aztec (Compact 2D barcode)
- ๐จ Design Customization:
- Custom colors (foreground/background)
- Logo embedding
- Frame styles
- Margin control
- Error correction levels (L, M, Q, H)
- โ๏ธ Generation Options:
- QR version control (1-40)
- Mask pattern selection (0-7)
- Scale and size control
- Kanji character support
- ๐ธ Scanner Options:
- Front/back camera switching
- Torch/flashlight control
- Custom scan regions
- Video styling options
- Scan delay configuration
``bash`
npm install code-craft-studioor
yarn add code-craft-studio
That's it! The package works out of the box in any React app.
`bash`
npm install code-craft-studio
npx code-craft-studio-setup
The setup script will:
- Install optional Capacitor dependencies
- Configure iOS and Android permissions
- Sync Capacitor
- Create example files
`bashInstall the package
npm install code-craft-studio
#### iOS Configuration
Add to your
Info.plist:`xml
NSCameraUsageDescription
This app needs camera access to scan QR codes
`#### Android Configuration
Add to your
AndroidManifest.xml:`xml
`๐ฏ Quick Start
$3
Add to your main CSS file:
`css
/ Import all Code Craft Studio styles /
@import 'code-craft-studio/src/styles/qrcode-studio.css';
`$3
#### Provider-less Hook API (Recommended)
`tsx
import { useCodeCraftStudio } from 'code-craft-studio';
import { QRType } from 'code-craft-studio';// Works anywhere in your app - no providers needed!
function MyComponent() {
const {
scanQRCode,
generateQRCode,
generateBarcode,
isReady,
error
} = useCodeCraftStudio();
const handleScan = async () => {
try {
const result = await scanQRCode();
console.log('Scanned:', result.content);
} catch (err) {
console.error('Scan failed:', err);
}
};
const handleGenerate = async () => {
const result = await generateQRCode({
type: QRType.WEBSITE,
url: 'https://example.com'
});
console.log('Generated:', result.dataUrl);
};
if (!isReady) return
Loading...;
return (
);
}
`#### React Components
`tsx
import {
QRScanner,
QRGenerator,
QRStudio,
BarcodeScanner,
} from 'code-craft-studio';// Simple QR Scanner
function Scanner() {
return (
onScan={(result) => {
console.log('Scanned:', result.content);
}}
/>
);
}
// Simple QR Generator
function Generator() {
return (
type='website'
data={{ url: 'https://example.com' }}
size={300}
/>
);
}
// Full Studio Component (QR + Barcode)
function Studio() {
return (
features={{
scanner: true,
generator: true,
barcodeScanner: true,
barcodeGenerator: true,
history: true,
}}
/>
);
}
`๐ง API Reference
$3
#### Check Permissions
`typescript
import { QRCodeStudio } from 'code-craft-studio';const permissions = await QRCodeStudio.checkPermissions();
console.log(permissions.camera); // 'granted' | 'denied' | 'prompt'
`#### Request Permissions
`typescript
const permissions = await QRCodeStudio.requestPermissions();
`#### Generate QR Code
`typescript
const qrCode = await QRCodeStudio.generate({
type: 'website',
data: { url: 'https://example.com' },
design: {
colors: {
dark: '#000000',
light: '#FFFFFF',
},
},
size: 300,
});console.log(qrCode.dataUrl); // Base64 image
console.log(qrCode.svg); // SVG string
`#### Start Scanning
`typescript
// Add listener for scan results
const listener = await QRCodeStudio.addListener('scanResult', (result) => {
console.log('Scanned:', result.content);
console.log('Type:', result.type);
console.log('Data:', result.parsedData);
});// Start scanning
await QRCodeStudio.startScan({
camera: 'back',
showTorchButton: true,
});
// Stop scanning
await QRCodeStudio.stopScan();
// Remove listener
listener.remove();
`#### Generate Barcode
`typescript
const barcode = await QRCodeStudio.generateBarcode({
format: 'EAN_13',
data: '5901234123457',
width: 300,
height: 100,
displayText: true,
});console.log(barcode.dataUrl); // Base64 barcode image
`#### Read Barcodes from Image
`typescript
const result = await QRCodeStudio.readBarcodesFromImage({
path: '/path/to/image.jpg',
formats: ['EAN_13', 'CODE_128', 'QR_CODE'],
});result.barcodes.forEach((barcode) => {
console.log(
Format: ${barcode.format}, Data: ${barcode.rawValue});
});
`๐จ React Components
$3
`tsx
onScan={(result) => {
console.log('Scanned:', result);
}}
onError={(error) => {
console.error('Error:', error);
}}
options={{
camera: 'back',
scanDelay: 1000,
showTorchButton: true,
showFlipCameraButton: true,
}}
showOverlay={true}
className='my-scanner'
/>
`$3
`tsx
type='wifi'
data={{
ssid: 'MyNetwork',
password: 'MyPassword',
security: 'WPA2',
}}
design={{
colors: {
dark: '#2C3E50',
light: '#FFFFFF',
},
logo: {
src: 'https://example.com/logo.png',
size: 60,
},
dotsStyle: 'rounded',
cornersSquareStyle: 'extra-rounded',
}}
size={400}
showDownload={true}
showShare={true}
onGenerate={(result) => {
console.log('Generated:', result);
}}
/>
`$3
`tsx
formats={['EAN_13', 'UPC_A', 'CODE_128', 'CODE_39']}
onScan={(result) => {
console.log(Scanned ${result.format}: ${result.rawValue});
// Validate barcode if needed
if (validateBarcodeData(result.format, result.rawValue)) {
// Process valid barcode
}
}}
onError={(error) => {
console.error('Scan error:', error);
}}
continuous={false}
torch={false}
showOverlay={true}
/>
`$3
`tsx
config={{
allowedTypes: ['website', 'wifi', 'vcard', 'text'],
defaultType: 'website',
defaultDesign: {
colors: {
dark: '#000000',
light: '#FFFFFF',
},
},
}}
theme={{
primary: '#007AFF',
secondary: '#5856D6',
mode: 'light',
}}
features={{
scanner: true,
generator: true,
landingPages: true,
analytics: true,
export: true,
sharing: true,
history: true,
favorites: true,
templates: true,
}}
onSave={(result) => {
console.log('Saved:', result);
}}
onScan={(result) => {
console.log('Scanned:', result);
}}
/>
`๐ Supported QR Code Types
| Type | Description | Required Data |
| -------------- | ----------------------- | --------------------------------------------- |
|
website | Link to any website | url, title?, description? |
| pdf | Share PDF documents | url, title?, description? |
| images | Multiple images gallery | images[], title?, description? |
| video | Video content | url, title?, thumbnail? |
| wifi | WiFi credentials | ssid, password?, security |
| menu | Restaurant menu | restaurantName, categories[] |
| business | Business information | name, phone?, email?, website? |
| vcard | Digital business card | firstName?, lastName?, phone?, email? |
| mp3 | Audio files | url, title?, artist? |
| apps | App store links | appStoreUrl?, playStoreUrl? |
| links_list | Multiple links | title?, links[] |
| coupon | Discount coupons | code, description?, validUntil? |
| facebook | Facebook page | pageUrl, pageName? |
| instagram | Instagram profile | profileUrl, username? |
| social_media | All social links | facebook?, instagram?, twitter?, etc. |
| whatsapp | WhatsApp chat | phoneNumber, message? |
| text | Plain text | text |
| email | Email composition | to, subject?, body? |
| sms | SMS message | phoneNumber, message? |
| phone | Phone call | phoneNumber |
| location | Geographic location | latitude, longitude, address? |
| event | Calendar event | title, startDate, endDate?, location? |๐จ Customization Options
$3
`typescript
interface QRDesignOptions {
colors?: {
dark?: string; // Foreground color
light?: string; // Background color
};
logo?: {
src: string; // Logo URL
size?: number; // Logo size
margin?: number; // Logo margin
borderRadius?: number;
};
frame?: {
style: 'square' | 'rounded' | 'circle' | 'banner';
text?: string;
color?: string;
textColor?: string;
};
dotsStyle?: 'square' | 'rounded' | 'dots' | 'classy' | 'extra-rounded';
cornersSquareStyle?: 'square' | 'dot' | 'extra-rounded';
cornersDotStyle?: 'square' | 'dot' | 'extra-rounded';
backgroundImage?: string;
imageSize?: number; // 0-1
margin?: number; // Quiet zone
}
`๐ Analytics
Track QR code performance:
`typescript
const analytics = await QRCodeStudio.getAnalytics({
qrCodeId: 'qr_123',
dateRange: {
start: new Date('2024-01-01'),
end: new Date(),
},
metrics: ['scans', 'unique_scans', 'locations', 'devices'],
});console.log('Total scans:', analytics.totalScans);
console.log('Unique scans:', analytics.uniqueScans);
console.log('Top locations:', analytics.locations);
console.log('Device types:', analytics.devices);
`๐พ Export Formats
- PNG - Raster image format
- JPG - Compressed image format
- SVG - Vector format (scalable)
- PDF - Document format
- GIF - Animated format support
- JSON - Raw QR data
- WebP - Modern image format
- EPS - Vector format for print
- WMF - Windows metafile
๐ Permissions
$3
- Camera permission for scanning
- Photo library permission for saving (optional)
$3
- Camera permission for scanning
- Storage permission for saving (optional)
$3
- Camera/getUserMedia permission for scanning
โ๏ธ Advanced Configuration
$3
All options are exposed to give you full control over QR code generation:
`typescript
await QRCodeStudio.generate({
type: 'website',
data: { url: 'https://example.com' }, // Basic options
size: 300, // Image size in pixels
errorCorrectionLevel: 'M', // L (7%), M (15%), Q (25%), H (30%)
// Advanced options
version: undefined, // QR version (1-40, auto if undefined)
maskPattern: undefined, // Mask pattern (0-7, auto if undefined)
margin: 4, // Quiet zone size
scale: 4, // Scale factor (pixels per module)
width: undefined, // Force specific width (overrides scale)
toSJISFunc: undefined, // Kanji encoding function
// Design options
design: {
colors: { dark: '#000000', light: '#FFFFFF' },
logo: { src: 'logo.png', size: 60 },
// ... other design options
},
});
`$3
Configure the scanner with extensive options:
`typescript
await QRCodeStudio.startScan({
// Camera options
camera: 'back', // 'front' or 'back'
showTorchButton: true, // Show flashlight toggle
showFlipCameraButton: true, // Show camera switch button // Performance options
scanDelay: 200, // Milliseconds between scans
maxScansPerSecond: 5, // Alternative to scanDelay
// Web-specific options
videoStyle: {
// Custom video element styling
position: 'fixed',
width: '100%',
height: '100%',
objectFit: 'cover',
},
highlightCodeOutline: true, // Highlight detected QR codes
highlightScanRegion: true, // Highlight scan area
calculateScanRegion: (video) => ({
// Custom scan region
x: video.videoWidth * 0.25,
y: video.videoHeight * 0.25,
width: video.videoWidth * 0.5,
height: video.videoHeight * 0.5,
}),
// Format filtering
formats: [BarcodeFormat.QR_CODE], // Scan only specific formats
});
`๐งช Testing
Run the test suite:
`bash
npm test
`๐ Barcode Examples
$3
`typescript
import { QRCodeStudio, validateBarcodeData } from 'code-craft-studio';// Generate product barcode
async function createProductLabel(productId: string, sku: string) {
// Generate EAN-13 barcode for product
const barcode = await QRCodeStudio.generateBarcode({
format: 'EAN_13',
data: '5901234123457', // Your product EAN
width: 300,
height: 100,
displayText: true,
outputFormat: 'png',
});
// Also generate a QR code with detailed product info
const qrCode = await QRCodeStudio.generate({
type: 'text',
data: { text: JSON.stringify({ id: productId, sku, warehouse: 'A1' }) },
size: 200,
});
return { barcode, qrCode };
}
// Scan and validate product
async function scanProduct() {
const listener = await QRCodeStudio.addListener('scanResult', (result) => {
if (result.format === 'EAN_13') {
if (validateBarcodeData('EAN_13', result.content)) {
console.log('Valid product barcode:', result.content);
// Look up product in database
}
}
});
await QRCodeStudio.startScan({
formats: ['EAN_13', 'UPC_A', 'QR_CODE'],
});
}
`$3
`tsx
import React from 'react';
import { QRCodeStudio } from 'code-craft-studio';function TicketGenerator({ eventId, userId, seatNumber }) {
const generateTicket = async () => {
// Generate PDF417 barcode (common for tickets/boarding passes)
const ticketBarcode = await QRCodeStudio.generateBarcode({
format: 'PDF_417',
data: JSON.stringify({
event: eventId,
user: userId,
seat: seatNumber,
timestamp: Date.now(),
}),
width: 400,
height: 150,
});
return ticketBarcode;
};
return ;
}
`$3
`tsx
import React, { useState } from 'react';
import { BarcodeScanner, getBarcodeConstraints } from 'code-craft-studio';function UniversalScanner() {
const [lastScan, setLastScan] = useState(null);
const handleScan = (result) => {
const constraints = getBarcodeConstraints(result.format);
setLastScan({
format: result.format,
data: result.rawValue,
constraints: constraints.description,
});
// Handle different barcode types
switch (result.format) {
case 'QR_CODE':
// Parse QR code data
break;
case 'EAN_13':
case 'UPC_A':
// Look up product
break;
case 'CODE_128':
// Process inventory code
break;
case 'PDF_417':
// Handle ticket/document
break;
}
};
return (
formats={[
'QR_CODE',
'EAN_13',
'EAN_8',
'UPC_A',
'UPC_E',
'CODE_128',
'CODE_39',
'ITF',
'PDF_417',
'AZTEC',
]}
onScan={handleScan}
continuous={true}
/> {lastScan && (
Last Scan
Format: {lastScan.format}
Data: {lastScan.data}
Type: {lastScan.constraints}
)}
);
}
`๐ค Contributing
Contributions are welcome! Please read our Contributing Guide for details.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
Ahsan Mahmood
- Website: https://aoneahsan.com
- GitHub: @aoneahsan
- Email: aoneahsan@gmail.com
- Built on top of Capacitor
- QR scanning powered by qr-scanner
- QR generation powered by qrcode
- [ ] Batch QR code generation
- [ ] Custom QR code shapes
- [ ] Animated QR codes
- [ ] Advanced analytics dashboard
- [ ] Cloud sync support
- [ ] Bulk operations API
- [ ] QR code templates marketplace
- ๐ง Email: aoneahsan@gmail.com
- ๐ Issues: GitHub Issues
- ๐ Docs: Documentation
---
This package takes over and continues development from the original qrcode-studio package.