QR Code

A component that generates a QR code based on the provided data.

Anatomy

<QrCode.Root>
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
  <QrCode.Overlay />
  <QrCode.DownloadTrigger />
</QrCode.Root>

Examples

With Overlay

You can also add a logo or overlay to the QR code. This is useful when you want to brand the QR code.

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

Root Provider

An alternative way to control the QR code is to use the RootProvider component and the useQrCode hook. This way you can access the state and methods from outside the component.

Download

Use the QrCode.DownloadTrigger component to allow users to download the QR code as an image. Specify the fileName and mimeType props for the downloaded file.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`defaultValue`		`string` The initial value to encode when rendered. Use when you don't need to control the value of the qr code.
`encoding`		`QrCodeGenerateOptions` The qr code encoding options.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; frame: string }>` The element ids.
`onValueChange`		`(details: ValueChangeDetails) => void` Callback fired when the value changes.
`pixelSize`		`number` The pixel size of the qr code.
`value`		`string` The controlled value to encode.

CSS Variable	Description
`--qrcode-pixel-size`	The size of the Root
`--qrcode-width`	The width of the Root
`--qrcode-height`	The height of the Root

DownloadTrigger

Renders a <button> element.

Prop	Default	Type
`fileName`		`string` The name of the file.
`mimeType`		`DataUrlType` The mime type of the image.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`quality`		`number` The quality of the image.

Frame

Renders a <svg> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Overlay

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Pattern

Renders a <svgpath> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseQrCodeReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Context

API

Property	Type
`value`	`string` The value to encode.
`setValue`	`(value: string) => void` Set the value to encode.
`getDataUrl`	`(type: DataUrlType, quality?: number) => Promise<string>` Returns the data URL of the qr code.