QRDrobe 🎨

!npm version

The complete QR code and barcode generation library for JavaScript & TypeScript ✨

Generate beautiful, customizable QR codes and industry-standard barcodes (Code 128, Code 39, EAN-13) with a single,
powerful library. Perfect for web applications, mobile apps, e-commerce platforms, inventory management systems, and
more.

✨ Why Choose QRDrobe?

$3

- QR Codes: Beautiful, scannable QR codes with logo support and custom styling
- Barcodes: Production-ready Code 128, Code 39, and EAN-13 barcodes
- Single Library: Eliminates the need for multiple dependencies

$3

- Auto-sizing: QR codes adapt perfectly to any canvas dimensions
- Auto-width: Barcodes intelligently calculate optimal width
- Smart Logo Scaling: Center images automatically adjust based on error correction level
- Check Digit Automation: EAN-13 check digits calculated and validated automatically

$3

- Scanner Tested: Compatible with commercial barcode scanners and POS systems
- Standards Compliant: Implements official barcode encoding specifications
- Production Ready: Trusted by retail, logistics, and e-commerce applications

$3

- TypeScript First: Complete type safety with full autocomplete support
- Zero Configuration: Works out of the box with intelligent defaults
- Framework Agnostic: Compatible with React, Vue, Angular, and vanilla JavaScript
- Modern Export Formats: Support for PNG, JPEG, WebP, SVG, and AVIF

📦 Installation

``bash
npm install @teonord/qrdrobe
`

$3

`html


`

🚀 Quick Start

$3

`typescript
import QRDrobe from '@teonord/qrdrobe';

const qr = new QRDrobe({
data: 'https://your-website.com',
width: 300,
height: 300,
errorCorrectionLevel: 'H',
dotsStyle: 'rounded',
foreground: '#000000',
background: '#ffffff'
});

await qr.append('#qr-container');
`

$3

`typescript
import {Barcode} from '@teonord/qrdrobe';

const barcode = new Barcode({
data: 'PRODUCT-2024-ABC',
barcodeType: 'code128',
height: 100
// Width automatically calculated for optimal scanning
});

await barcode.append('#barcode-container');
`

📊 Supported Barcode Types

$3

- Ideal For: Shipping labels, product identification, inventory tracking
- Character Set: Full ASCII (characters 32-126)
- Key Features: Compact encoding, high density, automatic checksum
- Common Use Cases: Amazon FBA labels, logistics systems, general alphanumeric encoding

`typescript
const barcode = new Barcode({
data: 'SHIP-US-2024-789456',
barcodeType: 'code128'
});
`

$3

- Ideal For: Warehouse management, asset tracking, defense applications
- Character Set: 0-9, A-Z, and symbols (- . $ / + % space)
- Key Features: Self-checking capability, no checksum required, wide industry support
- Common Use Cases: Library systems, warehouse location codes, equipment identification

`typescript
const barcode = new Barcode({
data: 'WAREHOUSE-A-SHELF-15',
barcodeType: 'code39' // Automatically converts to uppercase
});
`

$3

- Ideal For: Retail products, point-of-sale systems, global product identification
- Character Set: Numeric only (0-9)
- Key Features: GS1 standard compliance, automatic check digit calculation, universal compatibility
- Common Use Cases: Grocery stores, retail packaging, e-commerce products

`typescript
// Provide 12 digits - check digit is automatically calculated
const barcode = new Barcode({
data: '123456789012', // Automatically becomes 1234567890128
barcodeType: 'ean13'
});
`

🎨 QR Code Customization

$3

`typescript
const qr = new QRDrobe({
data: 'https://your-brand.com',
width: 400,
height: 400,

// Dot style customization
dotsStyle: 'rounded', // Options: 'square', 'dots', 'rounded'
dotsRadius: 0.3, // Rounding intensity (0-1)

// Color customization
foreground: '#FF6B6B',
background: '#F7F7F7',

// Center logo integration
image: 'logo.png',
errorCorrectionLevel: 'H' // Required for reliable logo integration
});
`

$3

- M (15%): Basic applications, text encoding, WiFi credentials
- Q (25%): Product packaging, outdoor usage, moderate reliability needs
- H (30%): Logo integration, high-value items, harsh environmental conditions

$3

`typescript
const qr = new QRDrobe({data: 'Initial data'});

// Update properties dynamically
await qr.update({
data: 'Updated content',
foreground: '#0066CC',
dotsStyle: 'dots',
image: 'new-logo.png'
});
`

📥 Export & Download Capabilities

$3

`typescript
// PNG format - ideal for barcodes
await code.download({name: 'code.png', format: 'png'});

// JPEG format - optimal file size
await code.download({name: 'code.jpg', format: 'jpeg', quality: 0.9});

// WebP format - modern compression
await code.download({name: 'code.webp', format: 'webp'});

// AVIF format - next-generation compression
await code.download({name: 'code.avif', format: 'avif'});

// SVG format - vector scalability
await code.download({name: 'code.svg', format: 'svg'});
`

$3

`typescript
// Generate Data URL for immediate use
const dataUrl = await qr.getDataURL({format: 'png'});
document.querySelector('img').src = dataUrl;

// Generate Blob for advanced handling
const blob = await barcode.getBlob({format: 'png'});
// Use with File API, upload to server, etc.
`

🎯 Real-World Applications

$3

`typescript
// Product QR code with brand logo
const productQR = new QRDrobe({
data: 'https://shop.com/product/123',
image: 'brand-logo.png',
errorCorrectionLevel: 'H'
});

// EAN-13 barcode for retail checkout
const ean = new Barcode({
data: '501234567890',
barcodeType: 'ean13'
});
`

$3

`typescript
// Shipping label barcode
const shipping = new Barcode({
data: 'SHIP-2024-ABC123',
barcodeType: 'code128',
height: 100
});

// Package tracking QR code
const tracking = new QRDrobe({
data: 'https://track.com/SHIP-2024-ABC123',
errorCorrectionLevel: 'Q'
});
`

$3

`typescript
// Warehouse location identification
const location = new Barcode({
data: 'WH-A-SHELF-15',
barcodeType: 'code39'
});

// Asset tracking with QR codes
const asset = new QRDrobe({
data: 'ASSET:12345:LAPTOP:2024',
dotsStyle: 'square'
});
`

$3

`typescript
// Event admission tickets
const ticket = new QRDrobe({
data: 'TICKET:CONCERT:2024:SEAT-A15',
errorCorrectionLevel: 'Q',
dotsStyle: 'rounded'
});

// Membership identification
const membership = new Barcode({
data: 'MEMBER-2024-789',
barcodeType: 'code128'
});
`

📚 API Reference

$3

`typescript
interface QRDrobeOptions {
data?: string; // Content to encode (default: '')
width?: number; // Canvas width in pixels (default: 300)
height?: number; // Canvas height in pixels (default: 300)
errorCorrectionLevel?: 'M' | 'Q' | 'H'; // Error correction level (default: 'M')
foreground?: string; // QR code color (default: '#000000')
background?: string; // Background color (default: '#ffffff')
dotsStyle?: 'square' | 'dots' | 'rounded'; // Module style (default: 'square')
dotsRadius?: number; // Rounding radius for modules (default: 0.25)
image?: string | HTMLImageElement; // Center image path or element
}
`

$3

`typescript
interface BarcodeOptions {
data?: string; // Content to encode (default: '')
barcodeType?: 'code128' | 'code39' | 'ean13'; // Barcode standard (default: 'code128')
width?: number; // Manual width (auto-calculated if omitted)
height?: number; // Barcode height in pixels (default: 100)
foreground?: string; // Bar color (default: '#000000')
background?: string; // Background color (default: '#ffffff')
margin?: number; // Margin in pixels (default: 4)
}
`

$3

`typescript
interface ImageOptions {
format?: 'png' | 'jpeg' | 'jpg' | 'webp' | 'avif' | 'svg'; // Output format
quality?: number; // Compression quality (0-1, JPEG/WebP/AVIF only)
name?: string; // Download filename
}
`

$3

#### QRDrobe Methods

`typescript
// Initialize and generate QR code
await qr.generate();

// Update configuration dynamically
await qr.update(options: Partial);

// Render to DOM element
await qr.append(container: string | HTMLElement);

// Retrieve canvas element
const canvas: HTMLCanvasElement = await qr.getRawCanvas();

// Generate data URL
const dataUrl: string = await qr.getDataURL(options ? : ImageOptions);

// Generate binary blob
const blob: Blob = await qr.getBlob(options ? : ImageOptions);

// Trigger browser download
await qr.download(options ? : ImageOptions);
`

#### Barcode Methods

`typescript
// Initialize and generate barcode
barcode.generate();

// Render to DOM element
await barcode.append(container: string | HTMLElement);

// Retrieve canvas element
const canvas: HTMLCanvasElement = barcode.getRawCanvas();

// Generate data URL
const dataUrl: string = barcode.getDataURL(options ? : ImageOptions);

// Generate binary blob
const blob: Promise = barcode.getBlob(options ? : ImageOptions);

// Trigger browser download
await barcode.download(options ? : ImageOptions);
`

🌐 Framework Integration Examples

$3

`tsx
import {useEffect, useRef} from 'react';
import QRDrobe, {Barcode} from '@teonord/qrdrobe';

interface QRCodeProps {
data: string;
width?: number;
height?: number;
}

function QRCodeComponent({data, width = 300, height = 300}: QRCodeProps) {
const containerRef = useRef(null);

useEffect(() => {
if (containerRef.current) {
const qr = new QRDrobe({data, width, height});
qr.append(containerRef.current);
}
}, [data, width, height]);

return