Basic usage

Create and customize QR codes for your needs.

Basic QR Code

import { QRCode } from 'qrdx';

<QRCode
  value="https://example.com"
  size={256}
/>

Customize Colors

<QRCode
  value="https://example.com"
  size={256}
  fgColor="#1a56db"
  bgColor="#ffffff"
  eyeColor="#0d47a1"
  dotColor="#3b82f6"
/>

Add Patterns

Choose from 9 body patterns, 9 corner eye patterns and 11 corner eye dot patterns:

<QRCode
  value="https://example.com"
  size={256}
  bodyPattern="rounded"
  cornerEyePattern="circle"
/>

There are 23 body patterns, from square, rounded and circle to connected liquid and classy styles and playful star or heart dots. See Patterns for the full list and the corner eye and eye dot options, and Shapes, eyes and frames to see them all.

Add a Logo

<QRCode
  value="https://example.com"
  size={512}
  hideLogo={false}
  logo="https://example.com/logo.png"
  level="Q"
/>

Use higher error correction (Q or H) when adding logos.

Use Templates

<QRCode
  value="https://example.com"
  templateId="Arrow"
  size={256}
/>

Available templates: default, Arrow, StandardBox, SquareBorder, StrikedBox, Halloween

Error Correction

Choose based on your use case:

• L (Low) — ~7% correction, clean environments
• M (Medium) — ~15% correction, general use
• Q (Quartile) — ~25% correction, with logos
• H (High) — ~30% correction, maximum resilience

<QRCode
  value="https://example.com"
  level="Q"
/>

Component Variants

QRCodeCanvas

For advanced customization with gradients:

import { QRCodeCanvas } from 'qrdx';

<QRCodeCanvas
  value="https://example.com"
  size={512}
  fgColor={{
    type: 'linear',
    stops: [
      { offset: 0, color: '#667eea' },
      { offset: 1, color: '#764ba2' }
    ],
    x1: 0, y1: 0, x2: 1, y2: 1
  }}
/>

QRCodeSVG

For scalable vector graphics:

import { QRCodeSVG } from 'qrdx';

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

Best Practices

Size Guidelines

• 128px — Minimum for scanning
• 256-512px — Recommended for web
• 1024px+ — High quality print

Error Correction

• Use Q or H when adding logos
• Use M for general applications
• Use L only in clean environments

Performance

• Use solid colors over gradients when possible
• Choose simpler patterns for better performance
• Cache QR codes server-side when possible

Next Steps

• Colors & Gradients — Advanced color options
• Templates — Pre-built styles
• Downloads — Export options