QR Code
v0.1.0DraftA QR code drawn as inline SVG for any value: one white plate and one path of black modules, rendered synchronously so it works in server components and prints crisply at any size.
A QR code drawn as inline SVG for any value: one white plate and one path of black modules, rendered synchronously so it works in server components and prints crisply at any size.
Usage
The ```jsx block above runs live on the docs site. Imports are stripped and every registry export is in scope, so you can compose with other components too.
Colour is fixed
The code is always black modules on a white plate, in Light, Dark and print. There is no colour prop: inverted or tinted codes fail on many scanners. The plate includes the quiet zone, so the code stays scannable on a near-black page and still prints with background graphics turned off.
Accessibility
The SVG has role="img" and an aria-label taken from the required label prop. Pass a translated string; the address the code encodes makes a good name.
Invalid values
If the value is empty or too long to encode, the component renders a dashed box at the same size, keeps the role and label, and never throws, so one bad row cannot break a server-rendered sheet.
Examples
Open all 4 →Properties
QrCode props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | The image's accessible name, read by screen readers. Required and never defaulted, so it goes through your i18n layer; the address the code encodes is a good name. |
value* | string | — | The text the code encodes, usually a full URL. An empty or too-long value renders the invalid box instead. |
className | string | — | Additional class names to merge with the component root element |
errorCorrection | "L" | "M" | "Q" | "H" | M | Error correction: `L` 7%, `M` 15%, `Q` 25%, `H` 30% of the code can be damaged. Defaults to `M`. |
margin | number | 4 | Quiet zone in modules, drawn in the white plate. Rounded down to a whole number and never below 0. Scanners need 4; `0` is for cases where the surroundings already leave the space. Defaults to `4`. |
size | number | 10 | Rendered width and height in rem. Never below 6 (1 in), the smallest size that scans reliably. Defaults to `10`. |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).
Functions
buildQrGeometry function
Encodes `value` and turns the module matrix into path data. Adjacent dark modules in a row merge into one rectangle, which keeps the markup small enough to server-render for a sheet of cards.
buildQrGeometry(value: string, errorCorrection: QrErrorCorrection, margin: number): QrGeometry| Parameter | Type | Default | Description |
|---|---|---|---|
value | string | — | - The text to encode |
errorCorrection | QrErrorCorrection | — | - Redundancy level; higher survives more damage |
margin | number | — | - Quiet-zone width in modules, added around the grid |
Returns QrGeometry — The grid size and the path, or throws when the value cannot be encoded
canEncodeQr function
Whether `value` fits in a code at the given error correction. Lets a consumer such as a card hide the printed address when the code itself shows the invalid box.
canEncodeQr(value: string, errorCorrection?: QrErrorCorrection): boolean| Parameter | Type | Default | Description |
|---|---|---|---|
value | string | — | - The text to encode |
errorCorrection? | QrErrorCorrection | "M" | - Redundancy level, `M` by default as in QrCode |
Returns boolean — `true` when the value can be encoded