QR Code

Usage

import { QrCode } from "@chakra-ui/react"

<QrCode.Root value="...">
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>

:::info

If you prefer a closed component composition, check out the snippet below.

:::

Examples

Sizes

Use the size prop to set the size of the QR code.

Logo Overlay

Pass the children prop to the QrCode.Overlay component to add a logo or overlay to the QR code.

Fill

Use the fill prop to set the fill color of the QR code.

Download

Use the QrCode.DownloadTrigger to download the QR code.

The fileName and the mimeType props are required.

Error Correction

In cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

Use the encoding.ecc or encoding.boostEcc property to set the error correction level:

• L: Allows recovery of up to 7% data loss (default)
• M: Allows recovery of up to 15% data loss
• Q: Allows recovery of up to 25% data loss
• H: Allows recovery of up to 30% data loss

Store

The RootProvider component provides a context for the QR code.

It accepts the value of the useQrCode hook. You can leverage it to access the component state and methods from outside the QR code.

Input

Here's an example of how to use the QrCode component with an Input component.

Spinner

Here's an example of how to use the QrCode component with a Spinner component.

Closed Component

Here's how to setup the QR code for a closed component composition.

If you want to automatically add the closed component to your project, run the command:

npx @chakra-ui/cli snippet add qr-code

Props

Root

DownloadTrigger

Explorer

Explore the QR Code component parts interactively. Click on parts in the sidebar to highlight them in the preview.