❯
◇

QrCode

6 parts

The root of a QR code. Encodes value into a matrix (via @robonen/encoding) and renders an <svg> whose viewBox is laid out in module units, so every child part draws in the same resolution-independent coordinate space and the whole code scales with the SVG's CSS width/height. It is fully headless: compose QrCodeBackground, QrCodeCells, QrCodeMarkers/QrCodeMarker and QrCodeLogo inside it and style them with CSS (fill, gradients, <defs>) — patterns, marker shapes and logos are all controlled by props or slots on those parts.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue
import {
  QrCodeRoot,
  QrCodeBackground,
  QrCodeCells,
  QrCodeMarker,
  QrCodeMarkers,
  QrCodeLogo,
} from '@robonen/primitives/display/qr-code';

<QrCodeRoot>
  <QrCodeBackground />
  <QrCodeCells />
  <QrCodeMarker />
  <QrCodeMarkers />
  <QrCodeLogo />
</QrCodeRoot>

API Reference

QrCodeRoot

Root

The root of a QR code. Encodes `value` into a matrix (via `@robonen/encoding`) and renders an `<svg>` whose viewBox is laid out in module units, so every child part draws in the same resolution-independent coordinate space and the whole code scales with the SVG's CSS width/height. It is fully headless: compose `QrCodeBackground`, `QrCodeCells`, `QrCodeMarkers`/`QrCodeMarker` and `QrCodeLogo` inside it and style them with CSS (`fill`, gradients, `<defs>`) — patterns, marker shapes and logos are all controlled by props or slots on those parts.

PropTypeDescription
valuestringThe text to encode. Re-encodes reactively when it changes.
errorCorrection?QrCodeErrorCorrectionError-correction level — higher levels survive more damage (and logos) at the cost of density. Default 'M'.
margin?number | Partial<QrCodeMargin>Quiet-zone width in modules, uniform or per-side. Default 4 (the spec minimum).
minVersion?numberSmallest QR version (1–40) to consider. Default 1.
maxVersion?numberLargest QR version (1–40) to consider. Default 40.
mask?numberMask pattern (0–7), or -1 to auto-select the lowest-penalty mask. Default -1.
boostEcc?booleanWhether to automatically raise the error-correction level if the data still fits. Default true.

QrCodeBackground

Background

A rectangle covering the entire code, quiet zone included. Use it for a solid backdrop or a gradient/pattern fill behind the modules. Defaults to `fill="none"` so the page background shows through unless you style it.

PropTypeDescription
fill?stringFill applied to the rectangle. Default 'none' (transparent). Overridable via CSS.
radius?numberCorner radius in module units. Default 0.

QrCodeCells

Cells

Renders the data modules of the code. The `pattern` prop switches between pixel styles; `fluid` is neighbour-aware and merges adjacent modules into smooth blobs. By default the three finder patterns are skipped so that `QrCodeMarker`/`QrCodeMarkers` can style them independently — set `includeMarkers` to draw a complete code from cells alone. For total control, provide a `#cell` slot: it is rendered once per dark module with its grid position and center, and you emit whatever SVG you like.

PropTypeDescription
pattern?QrCellPatternModule shape: square (default), dot, rounded, or fluid (connected).
radius?numberCorner roundness in [0, 1] for rounded/fluid. Default 0.5.
gap?numberGap between modules in [0, 1), as a fraction of cell size. Ignored by fluid. Default 0.
includeMarkers?booleanAlso render the finder-pattern modules (use when not composing QrCodeMarkers). Default false.

QrCodeMarker

Marker

A single finder ("eye") pattern, made of an outer `frame` ring and an inner `ball`. Position it by `corner` (resolved from the matrix size) or pin it with explicit `x`/`y` module coordinates. Override the `#frame` / `#ball` slots to draw arbitrary shapes; each receives the 7×7 region's origin and center.

PropTypeDescription
corner?MarkerCornerWhich finder to render. Ignored when both x and y are given. Default 'top-left'.
x?numberExplicit X of the finder's top-left module (overrides corner).
y?numberExplicit Y of the finder's top-left module (overrides corner).
frame?QrMarkerFrameOuter ring shape: square (default), rounded, or circle.
ball?QrMarkerBallInner ball shape: square (default), rounded, circle, or diamond.
radius?numberRoundness in [0, 1] for rounded frames/balls. Default 0.5.

QrCodeMarkers

Markers

Convenience wrapper that renders all three finder patterns with a shared style. Forwards `frame`/`ball`/`radius` to each `QrCodeMarker` and re-exposes their `#frame` / `#ball` slots (augmented with the `corner` being drawn). For fully bespoke per-corner rendering, use the `#default` slot — it is invoked once per marker with its placement.

PropTypeDescription
frame?QrMarkerFrameOuter ring shape for every marker. Default square.
ball?QrMarkerBallInner ball shape for every marker. Default square.
radius?numberRoundness in [0, 1] for rounded frames/balls. Default 0.5.