@afkarbase/qr

A modern, zero-dependency TypeScript QR code generator that works everywhere JavaScript runs.

Features

• 🚀 Zero Dependencies - Pure TypeScript implementation
• 🌐 Universal - Works in browsers and Node.js
• 🎯 Framework Agnostic - React, Vue, Angular, Vanilla JS
• 📦 Tree Shakable - Import only what you need
• 🎨 Multiple Outputs - SVG, Canvas, Data URLs, Raw Matrix
• ⚡ Fast - Optimized algorithm with minimal allocations
• 💪 TypeScript First - Full type safety and IntelliSense

Installation

npm install @afkarbase/qr

Quick Start

import { qr } from '@afkarbase/qr';

// Generate QR code
const qrCode = qr('Hello, World!');

// Get SVG output
const svg = qrCode.toSVG();

// Render to canvas
qrCode.toCanvas(canvasElement);

// Get data URL
const dataURL = qrCode.toDataURL('image/png');

API Reference

qr(data, options?)

Creates a QR code instance.

Parameters

• data (string): The data to encode
• options (optional): Configuration object

Options

interface QROptions {
  // Error correction level (default: 'M')
  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H';
  
  // QR code version (default: 'auto')
  version?: 'auto' | number; // 1-40
  
  // Margin size in modules (default: 4)
  margin?: number;
  
  // Colors
  darkColor?: string;   // default: '#000000'
  lightColor?: string;  // default: '#ffffff'
  
  // Scale for raster outputs
  scale?: number;       // default: 4
}

Output Methods

.toSVG(options?)

Returns an SVG string representation.

const svg = qrCode.toSVG({
  width: 200,
  height: 200,
  xmlDeclaration: true
});

.toCanvas(canvas, options?)

Renders the QR code to an HTML5 Canvas element.

const canvas = document.getElementById('qr-canvas') as HTMLCanvasElement;
qrCode.toCanvas(canvas, {
  scale: 8,
  margin: 4
});

.toDataURL(format?, quality?)

Returns a base64 data URL.

// PNG (default)
const pngDataURL = qrCode.toDataURL();

// JPEG with quality
const jpegDataURL = qrCode.toDataURL('image/jpeg', 0.8);

.toMatrix()

Returns the raw boolean matrix.

const matrix = qrCode.toMatrix();
// matrix[row][col] = true (dark) | false (light)

.getSize()

Returns the QR code dimensions.

const { width, height, modules } = qrCode.getSize();

Framework Examples

React

import { qr } from '@afkarbase/qr';
import { useMemo } from 'react';

function QRCodeComponent({ data }: { data: string }) {
  const qrCode = useMemo(() => qr(data), [data]);
  
  return (
    <div dangerouslySetInnerHTML={{ 
      __html: qrCode.toSVG() 
    }} />
  );
}

// Or with Canvas
function QRCanvas({ data }: { data: string }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  
  useEffect(() => {
    if (canvasRef.current) {
      qr(data).toCanvas(canvasRef.current);
    }
  }, [data]);
  
  return <canvas ref={canvasRef} />;
}

Vue 3

<template>
  <div v-html="qrSvg"></div>
</template>

<script setup lang="ts">
import { qr } from '@afkarbase/qr';
import { computed } from 'vue';

const props = defineProps<{ data: string }>();

const qrSvg = computed(() => qr(props.data).toSVG());
</script>

Angular

import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import { qr } from '@afkarbase/qr';

@Component({
  selector: 'qr-code',
  template: '<canvas #canvas></canvas>'
})
export class QRCodeComponent {
  @Input() data!: string;
  @ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
  
  ngAfterViewInit() {
    qr(this.data).toCanvas(this.canvasRef.nativeElement);
  }
}

Vanilla JavaScript

import { qr } from '@afkarbase/qr';

// SVG approach
const qrCode = qr('https://example.com');
document.getElementById('qr-container').innerHTML = qrCode.toSVG();

// Canvas approach
const canvas = document.getElementById('qr-canvas');
qr('Hello World').toCanvas(canvas);

// Image approach
const img = document.createElement('img');
img.src = qr('Data to encode').toDataURL();
document.body.appendChild(img);

Node.js

import { qr } from '@afkarbase/qr';
import fs from 'fs';

// Generate SVG file
const svg = qr('Server-side QR generation').toSVG();
fs.writeFileSync('qrcode.svg', svg);

// Get raw matrix for custom processing
const matrix = qr('Custom processing').toMatrix();
console.log(`QR Code size: ${matrix.length}x${matrix[0].length}`);

Error Correction Levels

| Level | Error Correction | Recovery Capacity | |-------|------------------|-------------------| | L | Low | ~7% | | M | Medium (default) | ~15% | | Q | Quartile | ~25% | | H | High | ~30% |

QR Code Versions

The library supports QR code versions 1-40:

• Version 1: 21×21 modules (up to 25 alphanumeric chars)
• Version 40: 177×177 modules (up to 4,296 alphanumeric chars)

Use version: 'auto' (default) for automatic version selection based on data length.

Browser Support

• ES2015+ environments (95%+ browser coverage)
• Node.js 14+
• Modern bundlers with ES modules support

Performance

• Bundle size: ~12KB minified + gzipped
• Generation time: <5ms for typical QR codes
• Memory efficient: Minimal allocations and automatic cleanup

Contributing

See ARCHITECTURE.md for technical details and development guidelines.

License

MIT © @afkarbase