QRCode
A QR code component based on a pure TypeScript, zero-dependency encoder (built in-house) that outputs inline SVG and is scannable and downloadable.
Basic Usage
Basic QR code
value accepts arbitrary text (numeric / alphanumeric / byte modes are chosen automatically); the default size is 128px.
Sizes
Custom size
size controls the rendered width/height (minimum 32; invalid values fall back to 128); the SVG scales via viewBox, so any size stays sharp.
Error Correction Level
error-correction
`error-correction` accepts `l/m/q/h`, but the current in-house encoder only implements **L-level** correction; m/q/h are normalized to l (it still renders normally and scanning is unaffected). Higher correction levels will be completed with encoder iterations.
Empty and Overflow
Empty value
When value is empty, a "暂无内容" placeholder is shown; when the content exceeds the L-level capacity of versions 1–10 (about 307 bytes), a "内容过长" message is shown.
Accessibility
aria-label
The container has `role="img"`; the `aria-label` attribute takes precedence, otherwise it falls back to the locale default copy (Chinese "二维码" / English "QR code"), readable by screen readers.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
aria-label | Accessible name of the container; defaults to i18n | — | — |
error-correction | Error correction level l/m/q/h (currently L only; the rest are normalized to l) | — | — |
size | Rendered width/height (px) | string | 128 |
value | QR code content text | string | — |
Encoder Choice (Architecture Decision)
- Under the zero-dependency principle, a full QR standard implementation (M/Q/H correction + masks + full version block tables) was judged too heavy, so a custom simplified L-level version was chosen;
- Supports versions 1–10, byte / alphanumeric / numeric modes, and picks the best of 8 mask patterns by penalty scoring;
- Correctness is cross-validated against standard reference vectors (RS error correction / format info / version info) and verified by matrix read-back self-checks; the output is recognized by standard scanners;
- The encoder functions (
encodeQR/matrixToPath, etc.) are exported by@oas-isui/uiand can be used for SSR or custom rendering.