QrCode
QrCode turns a string, usually a link, into a QR code. It draws SVG by default: crisp at any zoom, rendered on the server, and colored by the theme.
Demos
Basic
The code is one image to assistive tech, labelled with its value; pass aria-label to describe it instead.
Size
size is the code’s width in px. padding is the quiet zone around it, which scanners need to find the edges: keep it at least two modules wide.
Color
color and backgroundColor replace the theme’s colors. Keep dark modules on a light background with strong contrast: many scanners cannot read an inverted or low-contrast code.
Error correction
errorCorrectionLevel decides how much of the code can be damaged or covered and still read: L about 7%, M 15%, Q 25% and H 30%. A higher level needs more modules, so the same value gets denser. The level may be raised for free when the data still fits the same size.
Icon
iconSrc puts an image in the center, on a square of iconBackgroundColor (the background color by default) with iconBorderRadius corners. The icon covers modules, so use errorCorrectionLevel="H" and keep iconSize under about a quarter of size.
Render type
type="canvas" draws a bitmap after mount instead of SVG. A canvas reads the theme’s colors when it draws, so it does not follow a theme switched afterwards; pass color and backgroundColor if that matters.
Download
A canvas can be saved as a PNG with toDataURL(). The quiet zone is the element’s padding, so it is not in the image.
Theming
Brutal boxes the quiet zone in a square 2px ink frame. Elegant light draws a thin, rounded frame in a subtle border color. Elegant dark keeps the code dark on light: it uses the page color for the modules and the text color for the background, so the code is a light card on the dark page. Inverted (light on dark) codes look at home in a dark UI, but many scanners and phone cameras cannot read them.
QrCode Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
value | string | '' | The text to encode. | Unreleased |
size | number | 100 | Width and height of the code in px, without the padding. | Unreleased |
padding | number | string | 12 | The quiet zone: px or any CSS length. | Unreleased |
color | string | undefined | Module color. Defaults to the theme’s ink. | Unreleased |
backgroundColor | string | undefined | Background color, quiet zone included. Defaults to the theme’s light background. | Unreleased |
errorCorrectionLevel | L | M | Q | H | M | Error correction level. | Unreleased |
iconSrc | string | undefined | URL of an image drawn in the center. | Unreleased |
iconSize | number | 40 | Icon width and height in px. | Unreleased |
iconBackgroundColor | string | undefined | Fill behind the icon. Defaults to the background color. | Unreleased |
iconBorderRadius | number | 4 | Corner radius of the icon’s background in px. | Unreleased |
type | svg | canvas | svg | Render as SVG or as a canvas bitmap. | Unreleased |
aria-label | string | value | The accessible name of the image. | Unreleased |
The default type is svg, and the colors come from the theme. The encoder is Project Nayuki’s QR Code generator library (MIT), vendored into the source.