QR code

A QR code drawn offline from a text: dark modules on a light tile in both themes, with its quiet zone, an accessible name and an optional « copy the link » action.

Web · ✓Mobile · ✓Desktop · ✓BetaData display

import { QrCode } from "@krizaka/ui/qr-code";

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Akinaza's Boutique › Agenda: the owner scans the private calendar feed from the phone (krizaka/akinaza#282, krizaka-ui#760).

When to use

To hand a short text to a phone: a private calendar feed, an address to open, a pairing link.
Next to the same text as a link, so the person can scan it or copy it (copyLabel).

When not to use

For a code to type, such as a one-time passcode.Use instead: OTP input

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { QrCode } from "@krizaka/ui/qr-code";

Examples

From a text

An address as a code, dark modules on a light tile.

A calendar feed

A private feed address: scan it from the phone or copy the link.

Your calendar on your phone

Scan this code with the camera, or copy the link. Anyone with it can read your bookings: keep it private.

Props

A QR code from a text: dark modules on a light tile in both themes, a quiet zone, an accessible name, an optional copy action.

Prop	Type	Default	Description
`label`required	`string`	—	What the code is, for a screen reader (“Calendar feed — scan with your phone”), passed translated. The image is named by it.
`value`required	`string`	—	The text to encode — an address, a feed URL. Encoded here, in the browser (or on the server); never sent anywhere.
`className`	`string`	—	Classes merged last, on the wrapper.
`copiedLabel`	`string`	—	Said once the text is on the clipboard. Default: the copy label.
`copyLabel`	`string`	—	The words of the copy action, passed translated. Without them there is no « copy » button.
`level`	`QrLevel`	`M`	The error-correction level: L · M (default) · Q · H (a logo or wear on the print).
`onCopy`	`(() => void)`	—	Called after the text is copied.
`quietZone`	`number`	`4`	The quiet zone, in modules, around the code (the standard asks for 4). Default 4, never less than 2.
`size`	`number`	`176`	The side of the tile, in px, quiet zone included. Default 176.

Accessibility

The code is an image named by label; the copy button says « copied » politely once the text is on the clipboard.
The tile keeps a 1 px border so its edge is visible on a light page; the quiet zone is at least 2 modules (4 by default).
The encoding happens in the browser (or on the server render): the text is never sent to a service.

Keyboard

Keys	Action
`Tab, Enter`	Reaches and activates the copy button, when there is one.

Best practices

Name it (label) with what scanning does: « Calendar feed: scan to subscribe ». The image is read by that name.
Keep the text short: a longer text makes a denser code that needs a bigger tile (size 176 px or more).
Leave the colours alone: a scanner needs dark modules on a light tile, so the tile stays light in the dark theme.
Pass copyLabel whenever the text is a link, for the person who reads this on the phone that would scan it.

Generated from the code of @krizaka/ui 3.65.0: its meta.ts, its examples and its types.Edit this documentation on GitHub