/// Data Display

QRCode

Renders a string as a crisp monochrome QR code (inline SVG) from a hand-rolled encoder — no dependency.

import { QRCode } from "@protocore/pds";

View as Markdown

Encoding a URL

Pass a value — a URL, token, or any UTF-8 string — and it renders as a sharp inline-SVG QR code. Dark modules paint in currentColor over a transparent quiet zone, so the code inherits the ink color and stays crisp at any size.

pds.protocore.io — encoded at version 1, level L. Placed on a light patch for reliable scanning.

Error correction and a centre logo

ecc sets the error-correction level (L/M/Q/H). A logo slot reserves a light patch in the centre and overlays your mark — raise ecc to "M" or higher first, since the logo occludes data modules that the redundancy then recovers.

The encoder

The QR matrix is produced by a small, self-contained encoder (byte mode, versions 1–10, all four ECC levels) — Reed–Solomon error correction over GF(256), block interleaving, and automatic mask selection by penalty score. There is no runtime dependency, and because encoding is deterministic the component is server-safe: SSR and hydration produce the identical SVG.

Versions 1–10 hold up to roughly 270 bytes at level L, which covers any URL and most tokens. A payload beyond that throws during encode; the component catches it and renders an invalid marker rather than a broken code — that's the point to reach for a dedicated library.

For reliable scanning across every reader, place the code on a plain, light surface and keep the quiet zone clear.

Usage

Encode URLs and short tokens; keep payloads compact.
Raise `ecc` to `M`+ whenever you add a centre `logo`.
Give it a `label` describing where the code leads.
Place it on a plain, light surface with the quiet zone intact.

Don't

Encode very long strings; versions cap at 10 and it will fail.
Add a logo at ECC `L`; the occlusion can break scanning.
Recolor it to low contrast; scanners need a clear dark/light split.
Crop the quiet-zone margin; readers rely on it.

Accessibility

The code is `role="img"` with an `aria-label` from the `label` prop; the SVG itself is `aria-hidden` so it isn't announced as decorative graphics.
A QR code is not a substitute for a link — offer the underlying URL as selectable text or a real anchor alongside it for users who can't scan.

`QRCode` props

Prop	Type	Default	Description
`className`	`string`	—
`ecc`	`enum`	`L`	Error-correction level. Use `"M"` or higher when adding a `logo`.
`label`	`string`	—	Accessible name describing what the code encodes.
`logo`	`ReactNode`	—	Optional centre mark. Reserves a light patch in the matrix — pair with `ecc="M"`+.
`margin`	`number`	`4`	Quiet-zone width in modules (the standard is 4).
`size`	`number`	`160`	Rendered width/height in px.
`style`	`CSSProperties`	—
`value` *	`string`	—	The string to encode (a URL, token, or any UTF-8 text).