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 · ✓Bureau · ✓BêtaAffichage de données

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

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Akinaza's Boutique › Agenda: the owner scans the private calendar feed from the phone (krizaka/akinaza#282, krizaka-ui#760).

Quand l’utiliser

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).

Quand ne pas l’utiliser

For a code to type, such as a one-time passcode.À la place : OTP input

Installation

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`label`requis	`string`	—	What the code is, for a screen reader (“Calendar feed — scan with your phone”), passed translated. The image is named by it.
`value`requis	`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.

Accessibilité

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.

Clavier

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

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 3.65.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub