Workspace
QrCode
A QR symbol from the package's own encoder
Usage
import { QrCode } from "@gpuixui/media";
<QrCode
value="https://gpuixui.dev/components/qr-code"
label="The component documentation"
size={160}
/>;API
| Prop | Type | Default |
|---|---|---|
value | string | required |
level | "L" | "M" | "Q" | "H" | "M" |
size | number | 160 |
quietZone | number | 4 |
ink | string | #111111 (a blank or non-text value reads as the default) |
paper | string | #FFFFFF (a blank or non-text value reads as the default) |
label | string | "QR code" |
className | string | — |
style | StyleDesc | — |
Modes
The encoder carries the value in the densest mode it wholly fits, and a version a step smaller than byte mode alone would need:
| Value | Mode | A version-1 L symbol holds |
|---|---|---|
| digits only | numeric | 41 digits |
the 45-character table (0-9, A-Z, space, $%*+-./:) | alphanumeric | 25 characters |
| anything else, as UTF-8 | byte | 17 bytes |
A value that mixes the sets — INV-2026-OK, a URL with a lower-case path — is
carried as one byte-mode segment rather than split into several, so the
symbol is always valid though not always the smallest one the standard allows.
The mode is a property of the value, not a prop: a caller who needs the smaller
symbol writes a payload the table already covers.
Edit this page on GitHubpackages/media/docs/qr-code.mdx