Qr Code
A component for generating and displaying QR codes for quick scanning and access to information.
Anatomy
Usage
<script>
import {QrCode} from 'ui-ingredients';
</script>
<QrCode.Root value="https://ui-ingredients.vercel.app">
<QrCode.Frame>
<QrCode.Pattern />
</QrCode.Frame>
<QrCode.DownloadTrigger>Download</QrCode.DownloadTrigger>
</QrCode.Root>
API Reference
Root
| Prop | Default | Description |
|---|
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 | | {
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. |
asChild | | Snippet Render a different element. |
DownloadTrigger
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
Frame
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
Overlay
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |
Pattern
| Prop | Default | Description |
|---|
asChild | | Snippet Render a different element. |