QRCode
ComponentsQR generationQR code generator for React — hand-written ISO/IEC 18004 encoder, SVG/canvas/PNG output, module & eye shapes, gradients, logo embedding with scannability validation, zero dependencies
Live demo
Install
$ npm install @usefy/qr-codeQuick start
QRCode.tsx
import { QRCode } from "@usefy/qr-code";
function ShareLink() {
return <QRCode value="https://usefy.dev" size={200} level="Q" title="Open usefy.dev" />;
}API reference
<QRCode />
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Uint8Array | — | The data to encode. Bytes are passed through verbatim, with no ECI header |
size | number | 160 | Rendered width and height in px |
render | "svg" | "canvas" | "svg" | SVG scales and server-renders; canvas is cheaper with many codes on screen |
controllerRef | Ref<QRCodeController> | — | Imperative handle for exports and downloads |
title | string | — | Accessible name. Without one the code is aria-hidden |
onError | (error: Error) => void | — | Called when encoding fails; the component renders nothing |
throwOnError | boolean | false | Throw during render instead, for an error boundary |
dpr | number | min(devicePixelRatio, 2) | Backing-store scale for render="canvas" |
className / style | — | — | Forwarded to the root element |
Plus every option in Options.
QRCodeController
| Method | Returns | Description |
|---|---|---|
getMatrix() | QRMatrix | null | The encoded symbol |
toSVG(options?) | string | A standalone SVG document |
toPNG(options?) | Promise<{ dataURL, blob }> | Rasterized PNG |
download(format?, filename?) | Promise<void> | Triggers a browser download ("png" or "svg") |
useQRCode(options)
const { matrix, error, svgProps, canvasRef, toSVG, toPNG, download } = useQRCode({
value: "https://usefy.dev",
level: "Q",
});
| Field | Type | Description |
|---|---|---|
matrix | QRMatrix | null | The encoded symbol, null when encoding failed |
error | Error | null | The encoding failure. Never thrown by the hook |
svgProps | QRSVGProps | null | Structured SVG data for rendering as JSX |
canvasRef | (el: HTMLCanvasElement | null) => void | Attach to a <canvas> to have it drawn and kept in sync |
toSVG / toPNG / download | — | As on the controller |
Go deeper
This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.