Skip to content
QRCodeSDK

@qrcodesdk/react

@qrcodesdk/react provides React components for rendering QR codes as SVG, PNG-backed image elements, and canvas elements.

Use it when a React component should own the QR code output while QRCodeSDK still handles matrix generation, styling, and browser downloads.

Install

Section titled “Install”
Terminal window
pnpm add @qrcodesdk/react @qrcodesdk/core @qrcodesdk/browser

Components

Section titled “Components”
Component Output Download support
SVGQRCode Inline SVG element SVG
ImageQRCode PNG-backed <img> PNG
CanvasQRCode <canvas> element None

All components accept:

Prop Type Description
data string Required QR code payload.
options object Matrix and renderer options.
className string CSS class applied to the component wrapper div.

options supports shared matrix options such as version, mode, errorCorrectionLevel, and mask. Renderer options match the corresponding QRCodeSDK renderer:

  • SVGQRCode uses QRCodeSVGOptions.
  • ImageQRCode uses QRCodeImageOptions.
  • CanvasQRCode uses QRCodeCanvasOptions.

Live examples

Section titled “Live examples”

SVG component

Section titled “SVG component”
import {SVGQRCode} from '@qrcodesdk/react';

export default function SVGQRCodeExample() {
  return (
    <SVGQRCode
      data="https://qrcodesdk.dev"
      options={{
        title: 'QR code for qrcodesdk.dev',
        ariaLabel: 'Scan to open qrcodesdk.dev',
      }}
    />
  );
}

Image component

Section titled “Image component”
import {ImageQRCode, type QRCodeImageOptions} from '@qrcodesdk/react';

export default function ImageQRCodeExample() {
  const options: QRCodeImageOptions = {
    size: 8,
    margin: 4,
    alt: 'QR code for qrcodesdk.dev',
    ariaLabel: 'Scan to open qrcodesdk.dev',
  };

  return <ImageQRCode data="https://qrcodesdk.dev" options={options} />;
}

Canvas component

Section titled “Canvas component”
import {CanvasQRCode, type QRCodeCanvasOptions} from '@qrcodesdk/react';

export default function CanvasQRCodeExample() {
  const options: QRCodeCanvasOptions = {
    size: 8,
    margin: 4,
    colors: {
      colorDark: '#111827',
      colorLight: '#ffffff',
    },
  };

  return <CanvasQRCode data="https://qrcodesdk.dev" options={options} />;
}

PNG download

Section titled “PNG download”
import {useRef} from 'react';

import {ImageQRCode, type ImageQRCodeHandle} from '@qrcodesdk/react';

export default function DownloadImageQRCodeExample() {
  const qrcode = useRef<ImageQRCodeHandle>(null);

  return (
    <div className="flex flex-col items-center">
      <ImageQRCode
        data="https://qrcodesdk.dev"
        options={{
          alt: 'QR code for qrcodesdk.dev',
        }}
        ref={qrcode}
      />
      <button
        className="btn-primary"
        onClick={() => qrcode.current?.download('qrcodesdk')}
        type="button">
        Download PNG
      </button>
    </div>
  );
}

Download files

Section titled “Download files”

SVGQRCode exposes download(filename?) and writes an SVG file through a React ref. ImageQRCode exposes download(filename?) and writes a PNG file through a React ref.

import {useRef} from 'react';


import {ImageQRCode, type ImageQRCodeHandle} from '@qrcodesdk/react';


export function DownloadQRCode() {
  const qrcode = useRef<ImageQRCodeHandle>(null);


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

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

Section titled “Related pages”