QrCode

QR codes are two-dimensional barcodes that can store various types of data and be scanned by devices to quickly access information. Use QR codes to provide quick access to URLs, contact information, or other data that users can scan with their mobile devices.

View in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { QrCode } from '@adaptavant/eds-core';

Sizes​

The QrCode component is available in 3 sizes: 64px, 120px (default), and 160px.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Small - 64px */}
  <QrCode value="https://setmore.com" size={64} />

  {/* Medium - 120px (default) */}
  <QrCode value="https://setmore.com" size={120} />

  {/* Large - 160px */}
  <QrCode value="https://setmore.com" size={160} />
</Box>
View in Playroom

Error Correction Levels​

Error correction levels determine how much of the QR code can be damaged while still being readable. Higher levels provide more redundancy but create denser patterns.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Low (7%) - Default */}
  <QrCode value="https://setmore.com" errorLevel="L" />

  {/* Medium (15%) */}
  <QrCode value="https://setmore.com" errorLevel="M" />

  {/* Quartile (25%) */}
  <QrCode value="https://setmore.com" errorLevel="Q" />

  {/* High (30%) */}
  <QrCode value="https://setmore.com" errorLevel="H" />
</Box>
View in Playroom

Note:QR Code Character Limits by Error Correction Level (Alphanumeric, Version 40)

Error Correction LevelMax Alphanumeric Characters
L (Low, ~7% recovery)4,296
M (Medium, ~15%)3,391
Q (Quartile, ~25%)2,581
H (High, ~30%)1,853
  • L (Low): Maximum data capacity, minimal error correction.
  • M (Medium): Moderate data capacity and error correction.
  • Q (Quartile): Higher error correction, reduced data capacity.
  • H (High): Maximum error correction, lowest data capacity.

Content Types​

QR codes can encode various types of content including URLs, emails, phone numbers, and plain text.

<Box className="flex flex-col gap-4 md:flex-row">
  {/* Website URL */}
  <QrCode value="https://setmore.com" />

  {/* Email address */}
  <QrCode value="mailto:support@setmore.com" />

  {/* Phone number */}
  <QrCode value="tel:+1234567890" />

  {/* Plain text */}
  <QrCode value="Hello, World!" />
</Box>
View in Playroom

Using Hooks​

Use the useQRCode hook for custom layouts and advanced styling with Box components.

const { containerProps, svgProps } = useQRCode({
  value: "https://setmore.com",
  size: 160,
  errorLevel: "H",
  classNames: {
    frame: "bg-accent rounded-12px p-3 text-link",
    qrCode: "fill-current",
  },
});

return (
  <Box {...containerProps}>
    <Box as="svg" {...svgProps} />
  </Box>
);
View in Playroom

The hook returns:

  • containerProps: Props to spread on the outer Box component
  • svgProps: Props to spread on the SVG Box component (with as="svg")
  • downloadAsPng: Function to download the QR code as PNG (shown in download example)

When to Use​

Use the component when:

  • You need a simple QR code display
  • Default styling and layout work for your use case

Use the hook when:

  • You need custom layouts with Box components
  • You want download functionality
  • You need advanced styling control
  • You're building complex interfaces with QR codes

Download​

Download QR codes as high-quality PNG images with configurable options.

const { containerProps, svgProps, downloadAsPng } = useQRCode({
  value: "https://setmore.com",
  size: 160,
  errorLevel: "H",
});

const handleDownload = () => {
  downloadAsPng({
    filename: "setmore-qr.png",
    imageSize: 640, // 4x the display size for high quality
  });
};

const handleHighResDownload = () => {
  downloadAsPng({
    filename: "setmore-qr-hd.png",
    imageSize: 1280, // 8x for ultra high quality
  });
};

return (
  <Stack className="items-center gap-2">
    <Box {...containerProps}>
      <Box as="svg" {...svgProps} />
    </Box>
    <Stack className="gap-2">
      <Button onClick={handleDownload}>
        Download (640px)
      </Button>
      <Button onClick={handleHighResDownload}>
        Download HD (1280px)
      </Button>
    </Stack>
  </Stack>
);
View in Playroom

Download Options:

  • filename: Name of the downloaded file (defaults to "qr-code.png")
  • imageSize: Size in pixels for the PNG image (defaults to display size × 4)

API Reference​

QR Code

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

QrCode parts​

The QrCode component exposes three StyleProps parts for granular styling control:

  • root: The outer container element
  • frame: The SVG element that contains the QR code
  • qrCode: The path element that renders the QR pattern
<QrCode 
  value="https://setmore.com"
  className="border-2 border-accent rounded-lg p-4"
  classNames={{
    frame: 'bg-neutral border border-tertiary rounded',
    qrCode: 'fill-positive opacity-90'
  }}
/>
View in Playroom

Style inheritance: The qrCode part uses fill="currentColor" by default, allowing color inheritance from CSS classes or the parent element's text color.