# QR Code

URL: https://ark-ui.com/docs/components/qr-code
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/qr-code.mdx

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

---

<ComponentPreview id="QrCode" />

## Anatomy

To set up the QR code correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="qr-code" />

## Examples

Learn how to use the `QR Code` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### 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.

<Example id="with-overlay" />

### 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

<Example id="error-correction" />

### Using the Root Provider

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.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## Guides

### Download a QR Code

You can download the QR code by using the `QrCode.DownloadTrigger`. You will have to provide the `fileName` and the
`mimeType` of the image.

```tsx
<QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
  Download
</QrCode.DownloadTrigger>
```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

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


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `pixelSize` | `number` | No | The pixel size of the qr code. |
| `value` | `string` | No | The controlled value to encode. |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'svg'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'path'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `modelValue` | `string` | No | The v-model value of the qr code |
| `pixelSize` | `number` | No | The pixel size of the qr code. |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `QrCodeApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to encode when rendered.
Use when you don't need to control the value of the qr code. |
| `encoding` | `QrCodeGenerateOptions` | No | The qr code encoding options. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; frame: string }>` | No | The element ids. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Callback fired when the value changes. |
| `pixelSize` | `number` | No | The pixel size of the qr code. |
| `ref` | `Element` | No |  |
| `value` | `string` | No | The controlled value to encode. |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `api` | `Snippet<[UseQrCodeContext]>` | No |  |


**DownloadTrigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `fileName` | `string` | Yes | The name of the file. |
| `mimeType` | `DataUrlType` | Yes | The mime type of the image. |
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `quality` | `number` | No | The quality of the image. |
| `ref` | `Element` | No |  |


**Frame Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'svg'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Overlay Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Pattern Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'path'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseQrCodeReturn` | Yes |  |
| `ref` | `Element` | No |  |


### Context

These are the properties available when using `UqrUcode.Context`, `useUqrUcodeContext` hook or `useUqrUcode` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `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. |