zenith-qr-generator

Premium React QR Code Designer & Generator — full customisation, logo support, one-click image copy-to-clipboard, live camera scanning, scan validation, batch generation, and professional export. Zero required runtime dependencies.

Why zenith-qr-generator

• Zero required runtime dependencies — the QR encoder is fully self-contained (a compact port of Nayuki's algorithm). No qrcode, no pngjs.
• Tiny when you need tiny — the pure-SVG <QRCode> tree-shakes to ~4 kB gzip, on par with the smallest libraries, yet the full studio is one import away.
• Does more — styling, logos, frames, templates, batch export, live camera scanning, and even ASCII/terminal output — all opt-in and tree-shakeable.
• Scannability guaranteed — every release is validated by decode tests that render each matrix and re-scan it.

Features

| Category | Details | |---|---| | 12 QR Data Types | URL, Text, Email, Phone, SMS, WhatsApp, WiFi, vCard, Google Maps, UPI, Social Media, Custom | | Live Preview | Every change updates instantly — no page refresh | | Dot Styles | Square, Circle, Rounded, Diamond, Star, Leaf | | Eye (Finder) Styles | Square, Rounded, Circle, Leaf, Diamond — outer & inner independently | | Colors | Foreground, Background, Gradient (linear/radial), Transparent BG | | Logo | Upload PNG/JPG/SVG · auto size validation · shape masks · shadow · padding | | Frames | 9 built-in labels + fully custom text | | Copy to Clipboard | copy() / copyPNG() / copySVG() / copyBase64() / copyDataURL() — works in Word, PowerPoint, Excel, Outlook, Gmail, Google Docs/Slides, WhatsApp Web, Slack, Teams, Discord, Photoshop, Canva, Figma, Paint | | Download | PNG · SVG · JPEG · WEBP · PDF at 1×/2×/4×/8× resolution | | Share | Web Share API with fallback to copy link | | Scan Validation | Contrast ratio · quiet zone · logo size · ECL · readability score (0–100, ★★★★★) | | Batch Generator | Generate 1000s of QR codes from CSV/JSON, download as ZIP | | Live Scanning | <QRScanner> / useQRScanner — decode from the device camera (optional jsqr peer) | | Lightweight SVG | <QRCode> — pure-SVG, ~4 kB gzip, 4 module shapes, SSR-friendly | | Text / Terminal | renderQRToString() — ASCII & Unicode-block QR for CLIs, logs, emails | | Templates | 10 ready-to-use styled templates | | Hooks | useQRCode · useClipboardQR · useQRDownload · useQRValidation · useQRScanner | | Themes | Light · Dark · Custom CSS variables · Tailwind/Bootstrap/MUI compatible | | Accessibility | Keyboard navigation · ARIA labels · Screen reader support · High contrast mode | | Performance | Encoder LRU cache · Canvas & SVG rendering · Memoisation · SSR compatible · Tree-shakeable · zero runtime deps |

Installation

npm install zenith-qr-generator
# or
yarn add zenith-qr-generator

zenith-qr-generator has no required runtime dependencies (React is a peer dependency). Live camera scanning uses jsqr, an optional peer — install it only if you use <QRScanner> / useQRScanner:

npm install jsqr

Import the styles once in your app (only needed for the studio/designer UI):

import 'zenith-qr-generator/styles';

Quick Start

import { QRCodeStudio } from 'zenith-qr-generator';
import 'zenith-qr-generator/styles';

function App() {
  return (
    <QRCodeStudio
      value="https://example.com"
      size={300}
      dotStyle="circle"
      eyeOuterShape="rounded"
      foregroundColor="#6366f1"
      copyButton
      downloadButton
      validate
    />
  );
}

Lightweight <QRCode>

When you just need a crisp, scannable code with the smallest possible bundle, use the pure-SVG <QRCode>. It imports only the encoder — no canvas, no studio UI — and tree-shakes to ~4 kB gzip. It renders plain SVG, so it works great with SSR.

import { QRCode } from 'zenith-qr-generator';

<QRCode
  value="https://example.com"
  size={200}
  level="M"              // 'L' | 'M' | 'Q' | 'H'
  shape="fluid"          // 'square' | 'dots' | 'rounded' | 'fluid'
  fgColor="#111827"
  bgColor="#ffffff"      // or 'transparent'
  margin={4}
  title="Visit our site"
/>

Cross-platform core (React · React Native · Next.js)

Need the absolute lightest, dependency-free build for React Native, edge/RSC, or Next.js server components? Import from the dedicated zenith-qr-generator/core entry. It contains no browser/Node globals (document, canvas, window), so it runs the same everywhere.

import {
  QRCode,        // pure-SVG component (web / Next.js)
  useQRPath,     // headless hook — returns memoized SVG geometry
  buildQRPath,   // pure function — { path, dim, count, data }
  encodeQRMatrix,// raw module matrix
  renderQRToString,
} from 'zenith-qr-generator/core';

React Native — render the path with react-native-svg:

import Svg, { Rect, Path } from 'react-native-svg';
import { buildQRPath } from 'zenith-qr-generator/core';

function QR({ value }: { value: string }) {
  const { path, dim } = buildQRPath(value, { shape: 'rounded' });
  return (
    <Svg width={200} height={200} viewBox={`0 0 ${dim} ${dim}`}>
      <Rect width={dim} height={dim} fill="#ffffff" />
      <Path d={path} fill="#000000" />
    </Svg>
  );
}

Live camera scanning

Decode QR codes from the device camera. Requires the optional jsqr peer (npm install jsqr), which is lazily loaded so it never touches your main bundle.

import { QRScanner } from 'zenith-qr-generator';

<QRScanner
  onScan={(result) => console.log('Decoded:', result.data)}
  onError={(msg) => console.warn(msg)}
  facingMode="environment"
/>

Or drive your own UI with the hook:

import { useQRScanner } from 'zenith-qr-generator';

function Scanner() {
  const { videoRef, isScanning, result, error, start, stop } = useQRScanner({
    onDecode: (r) => alert(r.data),
  });
  return (
    <>
      <video ref={videoRef} muted playsInline />
      <button onClick={() => (isScanning ? stop() : start())}>
        {isScanning ? 'Stop' : 'Start'}
      </button>
      {result && <p>{result.data}</p>}
      {error && <p role="alert">{error}</p>}
    </>
  );
}

Terminal / ASCII output

Render a scannable QR as text — perfect for CLIs, server logs, or plain-text emails. Encoder-only, ~3.7 kB gzip.

import { renderQRToString } from 'zenith-qr-generator';

console.log(renderQRToString('https://example.com'));       // Unicode half-blocks
renderQRToString('WIFI:...', { style: 'ascii', margin: 2 }); // '##' / '  '

Full Component API

<QRCodeStudio
  // ── Data ──
  value="https://example.com"

  // ── Size / Margin ──
  size={300}
  margin={4}

  // ── Error Correction ──
  errorCorrectionLevel="M"   // L | M | Q | H

  // ── Colors ──
  foregroundColor="#000000"
  backgroundColor="#ffffff"
  transparentBackground={false}
  gradient={{ type: 'linear', colors: ['#6366f1', '#ec4899'], angle: 135 }}

  // ── Dot style ──
  dotStyle="circle"          // square | circle | rounded | diamond | star | leaf
  dotRadius={0.35}           // corner radius for 'rounded' (0–1)

  // ── Eye (finder pattern) style ──
  eyeOuterShape="rounded"    // square | rounded | circle | leaf | diamond
  eyeInnerShape="square"
  eyeOuterColor="#6366f1"
  eyeInnerColor="#ec4899"

  // ── Logo ──
  logo={{
    src: '/logo.png',
    sizePercent: 20,
    padding: 4,
    borderRadius: 8,
    shadow: true,
    mask: 'rounded',           // square | rounded | circle
    backgroundColor: '#fff',
  }}

  // ── Frame ──
  frame={{ type: 'scan-me', color: '#000', backgroundColor: '#fff' }}

  // ── Rotation ──
  rotation={0}

  // ── Feature flags ──
  copyButton
  downloadButton
  shareButton
  validate
  showDesigner={false}

  // ── Theme ──
  theme="light"              // 'light' | 'dark' | Partial<QRTheme>

  // ── Callbacks ──
  onCopy={(format) => console.log('copied', format)}
  onDownload={(format, scale) => console.log(format, scale)}
  onShare={() => console.log('shared')}
  onValidate={(result) => console.log(result.score)}
  onChange={(value, options) => console.log(value, options)}
/>

Hooks

useQRCode

import { useQRCode } from 'zenith-qr-generator';

function MyComponent() {
  const { dataURL, svgString, isLoading, error, canvasRef } = useQRCode({
    value: 'https://example.com',
    size: 300,
    dotStyle: 'circle',
    foregroundColor: '#6366f1',
  });

  return (
    <>
      <canvas ref={canvasRef} />                    {/* renders directly */}
      {dataURL && <img src={dataURL} alt="QR" />}   {/* or use data URL */}
    </>
  );
}

useClipboardQR

import { useClipboardQR } from 'zenith-qr-generator';

function CopyExample() {
  const { copy, copyPNG, copySVG, copyBase64, copyDataURL, isCopying, lastResult } =
    useClipboardQR({ value: 'https://example.com', size: 300 });

  return (
    <>
      <button onClick={() => copy('png')} disabled={isCopying}>
        📋 Copy PNG
      </button>
      <button onClick={() => copySVG()}>Copy SVG Text</button>
      {lastResult?.success && <span>✓ Copied!</span>}
    </>
  );
}

useQRDownload

import { useQRDownload } from 'zenith-qr-generator';

function DownloadExample() {
  const { download, downloadPNG, downloadSVG, isDownloading } =
    useQRDownload({ value: 'https://example.com', size: 300 }, 'my-qr');

  return (
    <>
      <button onClick={() => download({ format: 'png', scale: 2 })}>PNG @2×</button>
      <button onClick={() => downloadSVG()}>SVG</button>
      <button onClick={() => downloadPNG(4)}>PNG @4×</button>
    </>
  );
}

useQRValidation

import { useQRValidation } from 'zenith-qr-generator';
import { ScanValidator } from 'zenith-qr-generator';

function ValidationExample() {
  const { result, isValidating } = useQRValidation({
    value: 'https://example.com',
    foregroundColor: '#aaa',
    backgroundColor: '#ccc',
  });

  return <ScanValidator result={result} isValidating={isValidating} />;
}

Utility Functions

import {
  // Copy to clipboard
  copyQR,          // copy(options, format)
  copyQRAsPNG,     // copies as PNG image — works everywhere
  copyQRAsSVG,     // copies SVG source text
  copyQRAsBase64,  // copies base64 string
  copyQRAsDataURL, // copies full data URL

  // Download
  downloadQR,      // downloadQR(options, format, scale, filename)
  downloadPNG,
  downloadSVG,
  downloadJPEG,
  downloadWEBP,
  downloadPDF,
  getQRBlob,       // returns Blob without downloading

  // Render
  renderQRToCanvas,
  renderQRToDataURL,
  renderQRToSVG,
  getQRMatrix,     // raw Uint8Array module matrix

  // Validate
  validateQR,

  // Batch
  generateBatch,
  downloadBatchAsZip,
  parseCSV,
  parseJSON,

  // Data formatters
  formatURL, formatEmail, formatPhone, formatSMS,
  formatWhatsApp, formatWiFi, formatVCard, formatMaps,
  formatUPI, formatSocial, formatText,
} from 'zenith-qr-generator';

Data Type Formatters

// WiFi
formatWiFi({ ssid: 'MyNet', password: 'secret', encryption: 'WPA' })
// → 'WIFI:T:WPA;S:MyNet;P:secret;;'

// vCard
formatVCard({ firstName: 'John', lastName: 'Doe', email: '[email protected]' })
// → 'BEGIN:VCARD\nVERSION:3.0\nN:Doe;John...'

// UPI Payment
formatUPI({ vpa: 'merchant@upi', payeeName: 'John', amount: 100 })
// → 'upi://pay?pa=merchant%40upi&pn=John&am=100.00&cu=INR'

// WhatsApp
formatWhatsApp({ phone: '+911234567890', message: 'Hello!' })
// → 'https://wa.me/+911234567890?text=Hello!'

Theming

CSS Variables

:root {
  --qrs-primary: #6366f1;
  --qrs-bg: #ffffff;
  --qrs-surface: #f8fafc;
  --qrs-text: #0f172a;
  --qrs-border: #e2e8f0;
  --qrs-radius: 10px;
  /* … see src/styles/index.css for all variables */
}

Custom Theme Object

<QRCodeStudio
  theme={{
    primary: '#f59e0b',
    background: '#1c1917',
    surface: '#292524',
    text: '#fafaf9',
    border: '#44403c',
    // … other QRTheme keys
  }}
/>

Batch Generation

import { BatchGenerator } from 'zenith-qr-generator';

<BatchGenerator
  baseOptions={{ dotStyle: 'circle', size: 300 }}
/>

Or use the utility directly:

import { generateBatch, downloadBatchAsZip, parseCSV } from 'zenith-qr-generator';

const items = parseCSV(csvText);
const results = await generateBatch(items, {
  value: '',
  format: 'png',
  scale: 2,
  onProgress: (done, total) => console.log(`${done}/${total}`),
});
await downloadBatchAsZip(results, 'qr-batch');

Development

# Install deps
npm install

# Run demo app
npm run dev

# Build library
npm run build:lib

# Run tests
npm test

# Type check
npm run type-check

# Lint
npm run lint

# Format
npm run format

Browser Support

| Browser | Copy-to-clipboard | Download | Share | |---|---|---|---| | Chrome 86+ | ✅ ClipboardAPI | ✅ | ✅ | | Edge 86+ | ✅ ClipboardAPI | ✅ | ✅ | | Firefox | ✅ execCommand fallback | ✅ | ⚠ limited | | Safari 13.1+ | ✅ ClipboardAPI | ✅ | ✅ |

License

MIT © zenith-qr-generator contributors

Keywords

QR code generator · React QR code · React Native QR code · Next.js QR code · SSR QR code · TypeScript QR code library · custom / styled QR codes · QR code with logo · gradient QR codes · SVG & Canvas QR rendering · copy QR to clipboard · download QR as PNG / SVG / JPEG / WEBP / PDF · live camera QR scanner & reader · scan validation · batch QR generation from CSV / JSON · WiFi QR code · vCard QR code · UPI payment QR code · URL / email / SMS / WhatsApp QR codes · zero-dependency · lightweight · tree-shakeable · cross-platform.

zenith-qr-generator is a modern, customizable QR code library for React, React Native, and Next.js — generate professional QR codes with logo support, live preview, clipboard copy, PNG/SVG/PDF export, scan validation, gradients, custom styles, frames, batch generation, templates, full TypeScript types, and a dependency-free /core entry for building enterprise-ready QR code experiences on any platform.