QR Code

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

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.

Examples

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

import { QrCode } from '@ark-ui/react/qr-code'

export const Basic = () => {
  return (
    <QrCode.Root defaultValue="http://ark-ui.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

import { QrCode } from '@ark-ui/solid/qr-code'

export const Basic = () => {
  return (
    <QrCode.Root value="http://ark-ui.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
</script>

<template>
  <QrCode.Root defalutValue="http://ark-ui.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
      Download
    </QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

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.

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

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.

import { QrCode } from '@ark-ui/react/qr-code'

export const WithOverlay = () => {
  return (
    <QrCode.Root defaultValue="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

import { QrCode } from '@ark-ui/solid/qr-code'

export const WithOverlay = () => {
  return (
    <QrCode.Root defaultValue="http://ark-ui.com">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

<script setup lang="ts">
import { QrCode } from '@ark-ui/vue/qr-code'
</script>

<template>
  <QrCode.Root defaultValue="http://ark-ui.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://ark-ui.com/icon-192.png" alt="Ark UI Logo" />
    </QrCode.Overlay>
  </QrCode.Root>
</template>

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

import { QrCode } from '@ark-ui/react/qr-code'

export const ErrorCorrection = () => {
  return (
    <QrCode.Root defaultValue="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

import { QrCode } from '@ark-ui/solid/qr-code'

export const ErrorCorrection = () => {
  return (
    <QrCode.Root defaultValue="http://ark-ui.com" encoding={{ ecc: 'H' }}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

<script setup lang="ts">
import { QrCode, type QrCodeGenerateOptions } from '@ark-ui/vue/qr-code'
import { ref } from 'vue'

const encoding = ref<QrCodeGenerateOptions>({ ecc: 'H' })
</script>

<template>
  <QrCode.Root defaultValue="http://ark-ui.com" :encoding="encoding">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.Root>
</template>

Using the Root Provider

The RootProvider component provides a context for the qr-code. It accepts the value of the useQr-code hook. You can leverage it to access the component state and methods from outside the qr-code.

import { QrCode, useQrCode } from '@ark-ui/react/qr-code'
import { useState } from 'react'

export const RootProvider = () => {
  const [value, setValue] = useState('http://ark-ui.com')
  const qrCode = useQrCode({ value })

  return (
    <>
      <button
        onClick={() => {
          setValue('https://chakra-ui.com')
        }}
      >
        Set Value
      </button>
      <QrCode.RootProvider value={qrCode}>
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>
      </QrCode.RootProvider>
    </>
  )
}

import { QrCode, useQrCode } from '@ark-ui/solid/qr-code'

export const RootProvider = () => {
  const qrCode = useQrCode({ defaultValue: 'http://ark-ui.com' })

  return (
    <>
      <button onClick={() => qrCode().setValue('https://ark-ui().com')}>Set Value</button>

      <QrCode.RootProvider value={qrCode}>
        <QrCode.Frame>
          <QrCode.Pattern />
        </QrCode.Frame>
      </QrCode.RootProvider>
    </>
  )
}

<script setup lang="ts">
import { QrCode, useQrCode } from '@ark-ui/vue/qr-code'

const qrCode = useQrCode({ defaultValue: 'http://ark-ui.com' })
</script>

<template>
  <button @click="qrCode.setValue('https://ark-ui.com')">Set Value</button>

  <QrCode.RootProvider :value="qrCode">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.RootProvider>
</template>

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

API Reference

Root

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 of the qr code when it is first rendered. Use when you do not need to control the state 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.
`value`		`string` The value to encode.

DownloadTrigger

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

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

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

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

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.