QRDrobe 🎨

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?

🎯 All-in-One Solution

• 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

🚀 Smart & Automatic

• 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

💎 Professional Quality

• 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

🔧 Developer Experience

• 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

npm install @teonord/qrdrobe

CDN Usage (No Build Tools Required)

<script src="https://unpkg.com/@teonord/qrdrobe/qrdrobe.js"></script>

🚀 Quick Start

Generate a QR Code

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');

Generate a Barcode

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

Code 128 - General Purpose Encoding

• 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

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

Code 39 - Logistics & Asset Tracking

• 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

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

EAN-13 - Retail & Point of Sale

• 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

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

🎨 QR Code Customization

Advanced Styling Options

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
});

Error Correction Levels

• 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

Dynamic Updates

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

Multiple Format Support

// 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'});

Data URL and Blob Generation

// 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

E-Commerce & Retail Systems

// 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'
});

Shipping & Logistics Operations

// 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'
});

Inventory & Asset Management

// 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'
});

Events & Access Control

// 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

QRDrobe Configuration Options

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
}

Barcode Configuration Options

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)
}

Export Configuration Options

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
}

Core Methods

QRDrobe Methods

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

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

// 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

// 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<Blob> = barcode.getBlob(options ? : ImageOptions);

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

🌐 Framework Integration Examples

React Component Implementation

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<HTMLDivElement>(null);

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

    return <div ref={containerRef}/>;
}

export default QRCodeComponent;

Vue.js Component Implementation

<template>
  <div ref="barcodeContainer"></div>
</template>

<script setup lang="ts">
  import {ref, onMounted} from 'vue';
  import {Barcode} from '@teonord/qrdrobe';

  const props = defineProps<{
    data: string;
    type?: 'code128' | 'code39' | 'ean13';
  }>();

  const barcodeContainer = ref<HTMLElement | null>(null);

  onMounted(() => {
    if (barcodeContainer.value) {
      const barcode = new Barcode({
        data: props.data,
        barcodeType: props.type || 'code128'
      });
      barcode.append(barcodeContainer.value);
    }
  });
</script>

Angular Component Implementation

import {Component, Input, AfterViewInit, ElementRef} from '@angular/core';
import {Barcode} from '@teonord/qrdrobe';

@Component({
    selector: 'app-barcode',
    template: '<div #barcodeContainer></div>'
})

export class BarcodeComponent implements AfterViewInit {
    @Input() data: string = '';
    @Input() type: 'code128' | 'code39' | 'ean13' = 'code128';

    @ViewChild('barcodeContainer', {static: true})
    container!: ElementRef;

    ngAfterViewInit() {
        const barcode = new Barcode({
            data: this.data,
            barcodeType: this.type
        });
        barcode.append(this.container.nativeElement);
    }
}

Vanilla JavaScript Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QRDrobe Example</title>
</head>
<body>
<h1>QR Code & Barcode Generation</h1>

<div id="qrContainer"></div>
<div id="barcodeContainer"></div>

<script src="https://unpkg.com/@teonord/qrdrobe/qrdrobe.js"></script>
<script>
    // QR Code Generation
    const qr = new QRDrobe({
        data: 'https://example.com/demo',
        width: 250,
        height: 250,
        dotsStyle: 'rounded'
    });
    qr.append('#qrContainer');

    // Barcode Generation
    const barcode = new Barcode({
        data: '123456789012',
        barcodeType: 'ean13',
        height: 80
    });
    barcode.append('#barcodeContainer');
</script>
</body>
</html>

🎯 Implementation Best Practices

QR Code Recommendations

• ✅ Error Correction: Use level 'H' when integrating center logos
• ✅ Contrast: Maintain high contrast between foreground and background colors
• ✅ Testing: Validate with multiple scanning applications before deployment
• ✅ Data Efficiency: Keep encoded content concise for optimal scannability
• ✅ Compatibility: Use 'square' dot style for maximum device compatibility
• ✅ Size Consideration: Ensure minimum dimensions of 100×100 pixels for reliable scanning

Barcode Recommendations

• ✅ Format Selection: Use PNG format for crisp, high-quality barcode output
• ✅ Auto-width: Allow automatic width calculation for optimal scanner performance
• ✅ Color Scheme: Maintain black bars on white background for maximum compatibility
• ✅ Physical Testing: Test with actual barcode scanners before mass printing
• ✅ EAN-13 Input: Provide exactly 12 digits for automatic check digit calculation
• ✅ Type Selection: Use Code 128 for alphanumeric data, Code 39 for logistics applications
• ✅ Print Quality: Ensure 300+ DPI resolution for physical label printing

🆚 Technology Selection Guide

When to Use QR Codes

• 📱 Mobile Scanning: Users scanning with smartphone cameras
• 🌐 Web Content: Encoding URLs, contact information, WiFi credentials
• 🎨 Brand Integration: Visual design and branding are important
• 📊 Data Density: Need to encode substantial information (up to 4,000 characters)
• 🔄 Orientation Flexibility: Omnidirectional scanning capability required
• 🖼️ Visual Appeal: Aesthetic presentation is a priority

When to Use Barcodes

• 🏪 Retail Systems: Point-of-sale and checkout operations
• 📦 Warehouse Management: Inventory control and logistics tracking
• 🚚 Shipping Operations: Package labeling and transportation logistics
• 🎯 Industry Standards: Compliance with specific format requirements (EAN-13 for retail)
• ⚡ Performance: High-speed scanning in production environments
• 💰 Legacy Compatibility: Integration with existing scanning infrastructure
• 📄 Document Management: Physical document tracking and identification

📊 Scanner Compatibility & Testing

Verified Compatibility

• ✅ Mobile Devices: iOS Camera, Google Lens, dedicated scanning applications
• ✅ Commercial Scanners: Zebra, Honeywell, Datalogic handheld devices
• ✅ Point-of-Sale Systems: Major retail and hospitality POS platforms
• ✅ Warehouse Systems: Inventory management and logistics software
• ✅ Mobile SDKs: Barcode scanning libraries for mobile development
• ✅ Web APIs: Browser-based scanning solutions

Testing Recommendations

1. Multiple Device Testing: Test on various smartphones and tablets
2. Lighting Conditions: Verify performance in different lighting environments
3. Distance Testing: Ensure scannability at appropriate distances
4. Angle Testing: Validate scanning from different angles
5. Print Verification: Test printed output on intended media

🌟 Competitive Advantages

Unified Solution Architecture

• Comprehensive Feature Set: QR codes and barcodes in a single package
• Consistent API: Uniform interface across all generation types
• Reduced Dependencies: Eliminates need for multiple specialized libraries

Intelligent Automation

• Adaptive Sizing: Automatic optimization for canvas dimensions
• Smart Calculations: Intelligent width and parameter determination
• Error Management: Automatic check digit handling and validation

Modern Development Experience

• TypeScript Native: Complete type definitions and IntelliSense support
• Modern Formats: Support for next-generation image formats (AVIF, WebP)
• Framework Compatibility: Seamless integration with popular frameworks

🛠️ Technical Specifications

Browser Compatibility

• Chrome: Version 90 and above
• Firefox: Version 88 and above
• Safari: Version 14 and above
• Edge: Version 90 and above
• iOS Safari: Version 14 and above
• Android Chrome: Version 90 and above

Format Support Notes

• AVIF Format: Requires Chrome 85+, Firefox 93+, Safari 16+
• WebP Format: Universal support in modern browsers
• SVG Format: Vector output for resolution-independent scaling

Performance Characteristics

• Generation Speed: Sub-100ms for standard QR codes
• Memory Usage: Efficient canvas-based rendering
• Bundle Size: Optimized for minimal impact on application size

📄 License & Usage

MIT License

This library is released under the MIT License, permitting both personal and commercial use with minimal restrictions.

Key Permissions

• ✅ Commercial Use: Free for commercial applications
• ✅ Modification: Freedom to modify and adapt source code
• ✅ Distribution: Permission to distribute and sublicense
• ✅ Private Use: Unlimited use in private projects

Attribution

While not required, attribution is appreciated for significant use cases or derivative works.

Developed with precision for modern web applications ❤️

Available on npm: @teonord/qrdrobe