Library API reference

import { QRCode } from 'qrdx';

<QRCode
  value="https://example.com"
  size={256}
  fgColor="#000000"
  bgColor="#ffffff"
/>

import { QRCodeCanvas } from 'qrdx';

<QRCodeCanvas
  value="https://example.com"
  size={512}
  fgColor="#000000"
/>

import { QRCodeSVG } from 'qrdx';

<QRCodeSVG
  value="https://example.com"
  size={512}
/>

downloadQRCode(
  qrProps: QRProps,
  options: {
    format: 'png' | 'jpg' | 'svg' | 'pdf';
    size: { width: number; height: number };
    filename?: string;
  }
): Promise<void>

getQRCodeDataUrl(
  qrProps: QRProps,
  format: DownloadFormat,
  size: DownloadSize
): Promise<string>

copyQRCodeToClipboard(
  qrProps: QRProps,
  size?: DownloadSize
): Promise<void>

getSVGString(qrProps: QRProps): Promise<string>

handleImageLoad(
  imgElement: HTMLImageElement,
  size: number,
  returnFullData?: boolean
): Promise<string | any>

downloadImageWithBoundingBox(
  imgElement: HTMLImageElement,
  boundingBox: { x: number; y: number }[],
  filename: string
): void

getTemplate(templateId: string): TemplateDefinition | undefined

getAllTemplates(): TemplateDefinition[]

getTemplateIds(): string[]

getSolidColor(colorConfig: ColorConfig, fallback?: string): string
getContrastRatio(color1: string, color2: string): number
getContrastLevel(ratio: number): ContrastLevel
getLuminance(r: number, g: number, b: number): number
hexToRgb(hex: string): { r: number; g: number; b: number }

validateSize(width: number, height: number): {
  isValid: boolean;
  error?: string;
}

SUPPORTS_PATH2D: boolean

type QRProps = {
  value: string;
  size?: number;
  level?: ErrorLevel;
  bgColor?: ColorConfig;
  fgColor?: ColorConfig;
  margin?: number;
  imageSettings?: ImageSettings;
  // ...
};

type ColorConfig =
  | string
  | { type: 'solid'; color: string }
  | LinearGradient
  | RadialGradient;

type ErrorLevel = 'L' | 'M' | 'Q' | 'H';

// The arrays BODY_PATTERN, CORNER_EYE_PATTERNS, CORNER_EYE_DOT_PATTERNS and
// FRAME_STYLES (and their zod schemas) are exported from 'qrdx/types'.

type BodyPattern =
  | 'circle' | 'circle-large' | 'square' | 'diamond' | 'circle-mixed'
  | 'pacman' | 'rounded' | 'small-square' | 'vertical-line'
  | 'horizontal-line' | 'liquid' | 'liquid-horizontal' | 'liquid-vertical'
  | 'classy' | 'classy-rounded' | 'leaf' | 'plus' | 'hexagon' | 'star'
  | 'heart' | 'random-dots' | 'mosaic' | 'octagon';

type CornerEyePattern =
  | 'square' | 'rounded' | 'gear' | 'circle' | 'diya' | 'extra-rounded'
  | 'message' | 'pointy' | 'leaf' | 'drop' | 'octagon' | 'bevel'
  | 'squircle' | 'cushion' | 'shield' | 'petal' | 'leaf-reverse';

type CornerEyeDotPattern =
  | 'square' | 'rounded' | 'circle' | 'message' | 'message-reverse'
  | 'diya' | 'diya-reverse' | 'rounded-triangle' | 'leaf' | 'drop' | 'plus'
  | 'cross-rounded' | 'hexagon' | 'octagon' | 'flower' | 'heart'
  | 'squircle' | 'dots' | 'extra-rounded' | 'leaf-reverse' | 'drop-reverse';

// Retired (deprecated) values still render for saved designs but are not
// offered: RETIRED_CORNER_EYE_PATTERNS, RETIRED_CORNER_EYE_DOT_PATTERNS.

type EyeColors = {
  topLeft?: { outer?: ColorConfig; inner?: ColorConfig };
  topRight?: { outer?: ColorConfig; inner?: ColorConfig };
  bottomLeft?: { outer?: ColorConfig; inner?: ColorConfig };
};

type QRFrame = {
  style: FrameStyle; // 20 styles, see FRAME_STYLES
  text?: string; // up to 24 characters, default "Scan me"
  color?: string;
  textColor?: string;
  secondaryText?: string; // banner-top-bottom, circle, menu-card
  secondaryColor?: string; // gradient-border end color
  fontScale?: number; // 0.5 to 1.5
};

type DownloadFormat = 'png' | 'jpg' | 'svg' | 'pdf';

type DownloadSize = {
  width: number;
  height: number;
};

const PRESET_SIZES: Record<string, DownloadSize> = {
  small: { width: 200, height: 200 },
  medium: { width: 400, height: 400 },
  large: { width: 800, height: 800 },
  xlarge: { width: 1200, height: 1200 },
  '2xl': { width: 1600, height: 1600 },
  '3xl': { width: 2000, height: 2000 },
};

type LinearGradient = {
  type: 'linear';
  stops: GradientStop[];
  x1: number;
  y1: number;
  x2: number;
  y2: number;
};

type RadialGradient = {
  type: 'radial';
  stops: GradientStop[];
  cx: number;
  cy: number;
  r: number;
};

type GradientStop = {
  offset: number;
  color: string;
};

type ImageSettings = {
  src: string;
  height: number;
  width: number;
  excavate?: boolean;
  x?: number;
  y?: number;
  /** Extra clear space around the logo when excavating, in pixels */
  padding?: number;
  opacity?: number;
};

const ERROR_LEVELS = {
  L: 'Low (~7%)',
  M: 'Medium (~15%)',
  Q: 'Quartile (~25%)',
  H: 'High (~30%)',
} as const;

try {
  await downloadQRCode(props, options);
} catch (error) {
  console.error('Failed:', error);
}