QRCode

A QR code drawn on canvas or as SVG, with an icon in the middle, an error correction level and an expired state that offers a refresh.

Basic

Pass value the text or URL to encode, and the code draws itself at the default size with a light frame around it.

Without border

Set bordered={false} to drop the frame, for a code that sits on a card or panel that already has its own.

Size

Set size to scale the code, and iconSize to scale the logo in its center along with it.

Colors

Set color for the modules and bgColor for the background, with type="svg" when either is a CSS variable.

Error level

Raise errorLevel from L to H so the code survives more damage, which it needs once an icon covers its center.

Status

Set status to loading, scanned or expired to cover the code with an overlay, and onRefresh to offer a refresh.

Expiry cycle

Drive status yourself: set expired when the code times out, then go through loading back to active in onRefresh.

Custom status overlay

Pass statusRender to draw the overlay for every status yourself, using the locale text it receives.

Download as image

Set type to canvas or svg, then read the rendered element to download the code as a PNG or an SVG file.

In context

The component inside real screens, with the components it usually sits beside.

Two-factor setup

A two-factor setup card with a code to scan, a setup key to copy, and a six-digit field that confirms it.

API Reference

QRCode
QRCode's props. Rows marked antuikit in the Version column are added by the kit.