@qrcodesdk/react

React components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.

Install

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/react

Quick start

Import the components directly where you need them:

import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/react';

export function App() {
  return (
    <>
      <QRCodeSVG payload="https://qrcodesdk.dev" />
      <QRCodeImage payload="https://qrcodesdk.dev" />
      <QRCodeCanvas payload="https://qrcodesdk.dev" />
    </>
  );
}

Version compatibility

@qrcodesdk/react	React
0.x.x	^18.0.0 ^19.0.0

Components

Component	Output	Download support
QRCodeSVG	Inline SVG element	SVG
QRCodeImage	PNG-backed <img>	PNG
QRCodeCanvas	<canvas> element	None

Options

Prop	Type	Description
payload	string | number	Required QR code payload.
options	Component-specific options	Optional matrix and renderer options.

React passes className, style, and other fallthrough attributes to the component’s wrapper <div>. Use a React ref when you need a download handle; the rendered SVG, Image, or Canvas remains inside that wrapper.

Live examples

SVG component

import {useMemo} from 'react';

import {QRCodeSVG, type QRCodeSVGOptions} from '@qrcodesdk/react';

export default function QRCodeSVGExample() {
  const options = useMemo<QRCodeSVGOptions>(
    () => ({
      accessibility: {
        title: 'QR code for qrcodesdk.dev',
        ariaLabel: 'Scan to open qrcodesdk.dev',
      },
    }),
    [],
  );

  return <QRCodeSVG payload="https://qrcodesdk.dev" options={options} />;
}

Image component

import {useMemo} from 'react';

import {QRCodeImage, type QRCodeImageOptions} from '@qrcodesdk/react';

export default function QRCodeImageExample() {
  const options = useMemo<QRCodeImageOptions>(
    () => ({
      style: {moduleSize: 8, quietZone: 4},
      accessibility: {
        alt: 'QR code for qrcodesdk.dev',
        ariaLabel: 'Scan to open qrcodesdk.dev',
      },
    }),
    [],
  );

  return <QRCodeImage payload="https://qrcodesdk.dev" options={options} />;
}

Canvas component

import {useMemo} from 'react';

import {QRCodeCanvas, type QRCodeCanvasOptions} from '@qrcodesdk/react';

export default function QRCodeCanvasExample() {
  const options = useMemo<QRCodeCanvasOptions>(
    () => ({
      style: {
        moduleSize: 8,
        quietZone: 4,
        foreground: '#111827',
        background: '#ffffff',
      },
    }),
    [],
  );

  return <QRCodeCanvas payload="https://qrcodesdk.dev" options={options} />;
}

PNG download

Download PNG

import {useMemo, useRef} from 'react';

import {QRCodeImage, type QRCodeDownloadHandle, type QRCodeImageOptions} from '@qrcodesdk/react';

export default function QRCodeDownloadImageExample() {
  const qrcode = useRef<QRCodeDownloadHandle>(null);
  const options = useMemo<QRCodeImageOptions>(
    () => ({accessibility: {alt: 'QR code for qrcodesdk.dev'}}),
    [],
  );

  return (
    <div className="flex flex-col items-center gap-2">
      <QRCodeImage payload="https://qrcodesdk.dev" options={options} ref={qrcode} />
      <button
        className="btn-primary"
        onClick={() => qrcode.current?.download('qrcodesdk')}
        type="button">
        Download PNG
      </button>
    </div>
  );
}

Center images

Load and decode a browser image first, store the resulting HTMLImageElement in state, and pass it through options.centerImage.source. Updating that state rerenders the component with the prepared source. See Add a center image for the complete React lifecycle.

Download files

• QRCodeSVG exposes download(filename?) and writes an SVG file through a React ref.
• QRCodeImage exposes download(filename?) and writes a PNG file through a React ref.

import {useRef} from 'react';

import {QRCodeImage, type QRCodeDownloadHandle} from '@qrcodesdk/react';

export function QRCodeDownload() {
  const qrcode = useRef<QRCodeDownloadHandle>(null);

  return (
    <>
      <button type="button" onClick={() => qrcode.current?.download('qrcodesdk')}>
        Download PNG
      </button>
      <QRCodeImage ref={qrcode} payload="https://qrcodesdk.dev" />
    </>
  );
}

The appropriate .svg or .png extension is appended when necessary.

QRCodeCanvas does not include a download method. Use QRCodeImage when you want built-in PNG download support.

See Download or save for SVG, PNG, and manual Canvas downloads.

Server-side rendering

QRCodeSVG produces runtime-neutral SVG and can render on the server.

QRCodeImage and QRCodeCanvas rely on browser DOM and Canvas APIs, so they skip element creation and downloads outside the browser and populate their host after hydration.

Shared options

The options prop combines matrix options with the selected renderer’s options. Use the builder reference for encoding, version, mask, and error correction; Customize output for shared visual options; and the dedicated renderer references for output-specific options and constraints.

Public API

import {
  type QRCodeBaseProps,
  QRCodeCanvas,
  type QRCodeCanvasProps,
  type QRCodeDownloadHandle,
  QRCodeImage,
  type QRCodeImageProps,
  QRCodeSVG,
  type QRCodeSVGProps,
} from '@qrcodesdk/react';