API reference

interface CornerOptions {
  dot?: {
    style?: 'square' | 'rounded' | 'circle'; // inner 3×3 block
    color?: string;
  };
  square?: {
    style?: 'square' | 'rounded' | 'extra-rounded' | 'circle'; // outer 7×7 ring
    color?: string;
  };
}

interface LogoOptions {
  src?: string;        // https, relative path, blob:, or data:image/… URI
  element?: ReactNode; // takes priority over src when both provided
  size?: number;       // 0–1 relative to max safe area; ECL auto-picked; default 0.4
  margin?: number;     // space between logo and edge of cleared area; default 0
  hideDots?: boolean;  // clear dots behind logo area; default true
}

interface QROptions {
  errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'; // default: 'M'
  version?: number; // 1–40, auto by default
}

import { toSVGString, toDataURL } from '@ttsalpha/qrcode';

// Server-side SVG string — no DOM needed
const svg = toSVGString({ value: 'https://example.com', size: 512 });

// PNG data URL via Canvas (browser-only)
const png = await toDataURL({ value: 'https://example.com', size: 512 });

// JPEG with quality
const jpg = await toDataURL(
  { value: 'https://example.com', size: 512 },
  { format: 'jpeg', quality: 0.9 },
);

// Download link
const link = document.createElement('a');
link.href = await toDataURL({ value: 'https://example.com' });
link.download = 'qrcode.png';
link.click();

<!-- SVG (default) -->
<img src="https://qrcode.ttsalpha.com/qr?data=https://example.com" alt="QR code" />

<!-- PNG output -->
<img src="https://qrcode.ttsalpha.com/qr?data=Hello&dot=rounded&color=14b8a6&format=png" />

<!-- With a center logo -->
<img src="https://qrcode.ttsalpha.com/qr?data=https://example.com&logo=https://example.com/logo.png" />