QrCode

A component that creates a QR code from the supplied data.

Usage

Use QrCode to render a scannable QR code from any string (for example, a URL or identifier). Provide the data you want to encode, and the component will generate the QR image.

import { QrCode } from "@elemnts-ui/react";

<QrCode.Root value="https://Elemnts-ui.com">
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>;

Logo overlay

Add logo or badge on top of the QR by rendering it inside QrCode.Overlay.

Fill

Set the QR code’s color by applying style props to QrCode.Pattern.

Download

Allow users to download the QR code as an image using QrCode.DownloadTrigger.

API Reference

QrCode

The root component for the QR code.

Prop	Type	Default
asChild	`boolean`	-
defaultValue	`string`	-
encoding	`QrCodeGenerateOptions`	-
id	`string`	-
ids	`Partial<{ root: string; frame: string; overlay: string }>`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
pixelSize	`number`	-
value	`string`	-

QrCodeRootProvider

Provides a QR code machine created with useQrCode.

Prop	Type	Default
value	`UseQrCodeReturn`	required
asChild	`boolean`	-

QrCodeFrame

Wraps the QR code pattern.

Prop	Type	Default
asChild	`boolean`	-

QrCodePattern

Renders the QR code pattern.

Prop	Type	Default
asChild	`boolean`	-

QrCodeOverlay

Renders content over the QR code.

Prop	Type	Default
asChild	`boolean`	-

QrCodeDownloadTrigger

Triggers a download of the QR code image.

Prop	Type	Default
fileName	`string`	required
mimeType	`DataUrlType`	required
asChild	`boolean`	-
quality	`number`	-