Data
QRCode
Generates a QR code for a given string value, rendered as an <img>.
QRCodePreview
Usage
tsx
import { QRCode } from "@vesture/react";
<QRCode value="https://vesture.dev" size={160} />Behavior
- Client-only. qrcode's public API (toDataURL) is Promise-based even though the underlying module-matrix computation is synchronous internally, so QRCode renders in two passes — nothing, then the generated code once the promise resolves — rather than a synchronous static/interactive split like the chart components.
- fgColor/bgColor default to the current theme's text/background tokens, resolved to a concrete color via getComputedStyle at generation time — canvas rendering happens outside the CSSOM, so a raw var(...) reference can't be used directly the way it can in SVG or regular CSS.
- An empty value renders nothing rather than throwing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Required. The encoded string. |
| size | number | 128 | Pixel width/height. |
| errorCorrectionLevel | "L" | "M" | "Q" | "H" | "M" | Higher levels tolerate more damage/occlusion at the cost of a denser code. |
| fgColor / bgColor | string | — | Defaults to the theme's text/background color tokens. |