QR Code

A component that generates and displays QR codes.

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

<template>
  <QrCode.Root value="http://destyler.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://github.com/elonehoo.png" alt="" />
    </QrCode.Overlay>
    <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

import { QrCode } from '@destyler-ui/react'

export function Basic() {
  return (
    <QrCode.Root value="https://destyler.com">
      <QrCode.Frame>
        <QrCode.Pattern data-testid="pattern" />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://github.com/elonehoo.png" alt="" />
      </QrCode.Overlay>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

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

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

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
</script>

<QrCode.Root value="https://destyler.com">
  <QrCode.Frame><QrCode.Pattern data-testid="pattern" /></QrCode.Frame>
  <QrCode.Overlay><img src="https://github.com/elonehoo.png" alt="" /></QrCode.Overlay>
  <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode.Root>

Anatomy

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

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

import { QrCode } from '@destyler-ui/react'

export default function Basic() {
  return (
    <QrCode.Root>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay />
      <QrCode.DownloadTrigger />
    </QrCode.Root>
  )
}

import { QrCode } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <QrCode.Root>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay />
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png" />
    </QrCode.Root>
  )
}

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
</script>

<QrCode.Root value="https://destyler.com">
  <QrCode.Frame><QrCode.Pattern data-testid="pattern" /></QrCode.Frame>
  <QrCode.Overlay><img src="https://github.com/elonehoo.png" alt="" /></QrCode.Overlay>
  <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode.Root>

Examples

Basic

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

<template>
  <QrCode.Root value="http://destyler.com">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://github.com/elonehoo.png" alt="" />
    </QrCode.Overlay>
    <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

import { QrCode } from '@destyler-ui/react'

export function Basic() {
  return (
    <QrCode.Root value="https://destyler.com">
      <QrCode.Frame>
        <QrCode.Pattern data-testid="pattern" />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://github.com/elonehoo.png" alt="" />
      </QrCode.Overlay>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

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

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

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
</script>

<QrCode.Root value="https://destyler.com">
  <QrCode.Frame><QrCode.Pattern data-testid="pattern" /></QrCode.Frame>
  <QrCode.Overlay><img src="https://github.com/elonehoo.png" alt="" /></QrCode.Overlay>
  <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode.Root>

Controlled

Control the QR code value programmatically.

<script setup lang="ts">
import { QrCode } from '@destyler-ui/vue'
import { ref } from 'vue'

const value = ref('https://destyler.org')
</script>

<template>
  <QrCode.Root v-model="value">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

import { useState } from 'react'
import { QrCode } from '@destyler-ui/react'

export function Controlled() {
  const [value, setValue] = useState('https://destyler.org')

  return (
    <QrCode.Root value={value} onValueChange={({ value }) => setValue(value)}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

import { QrCode } from '@destyler-ui/solid/qr-code'
import { createSignal } from 'solid-js'

export function Controlled() {
  const [value, setValue] = createSignal('http://ui-ui.com')

  return (
    <QrCode.Root value={value()} onValueChange={e => setValue(e.value)}>
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
  let value = $state('https://destyler.org')
</script>

<QrCode.Root bind:value>
  <QrCode.Frame><QrCode.Pattern /></QrCode.Frame>
  <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode.Root>

Initial Value

Seed the encoded value with defaultValue.

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

<template>
  <QrCode.Root default-value="https://destyler.org">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://github.com/elonehoo.png" alt="" />
    </QrCode.Overlay>
    <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
  </QrCode.Root>
</template>

import { QrCode } from '@destyler-ui/react'

export function InitialValue() {
  return (
    <QrCode.Root defaultValue="https://destyler.org">
      <QrCode.Frame>
        <QrCode.Pattern data-testid="pattern" />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://github.com/elonehoo.png" alt="" />
      </QrCode.Overlay>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

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

export function InitialValue() {
  return (
    <QrCode.Root defaultValue="https://destyler.org">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">
        Download
      </QrCode.DownloadTrigger>
    </QrCode.Root>
  )
}

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
</script>

<QrCode.Root defaultValue="https://destyler.org">
  <QrCode.Frame><QrCode.Pattern data-testid="pattern" /></QrCode.Frame>
  <QrCode.Overlay><img src="https://github.com/elonehoo.png" alt="" /></QrCode.Overlay>
  <QrCode.DownloadTrigger fileName="qr-code.png" mimeType="image/png">Download</QrCode.DownloadTrigger>
</QrCode.Root>

Error Correction

Configure the error correction level.

<script setup lang="ts">
import { QrCode } from '@destyler-ui/vue'
import { ref } from 'vue'

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

<template>
  <QrCode.Root defaultValue="https://destyler.org" :encoding="encoding">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
  </QrCode.Root>
</template>

import { QrCode } from '@destyler-ui/react'

export function ErrorCorrection() {
  return (
    <QrCode.Root
      defaultValue="https://destyler.org"
      encoding={{ ecc: 'H' }}
    >
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

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

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

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
  const encoding: QrCode.GenerateOptions = { ecc: 'H' }
</script>

<QrCode.Root defaultValue="https://destyler.org" {encoding}>
  <QrCode.Frame><QrCode.Pattern /></QrCode.Frame>
</QrCode.Root>

With Overlay

Display an overlay image on the QR code.

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

<template>
  <QrCode.Root defaultValue="https://destyler.org">
    <QrCode.Frame>
      <QrCode.Pattern />
    </QrCode.Frame>
    <QrCode.Overlay>
      <img src="https://destyler.org/favicon.svg" alt="Logo" />
    </QrCode.Overlay>
  </QrCode.Root>
</template>

import { QrCode } from '@destyler-ui/react'

export function WithOverlay() {
  return (
    <QrCode.Root defaultValue="https://destyler.org">
      <QrCode.Frame>
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay>
        <img src="https://destyler.org/favicon.svg" alt="Logo" />
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

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

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

<script lang="ts">
  import { QrCode } from '@destyler-ui/svelte'
</script>

<QrCode.Root defaultValue="https://destyler.org">
  <QrCode.Frame><QrCode.Pattern /></QrCode.Frame>
  <QrCode.Overlay><img src="https://destyler.org/favicon.svg" alt="Logo" /></QrCode.Overlay>
</QrCode.Root>

Root Provider

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

const qrCode = useQrCode({ defaultValue: 'https://destyler.org' })
</script>

<template>
  <button @click="qrCode.setValue('https://destyler.org')">Set Value</button>

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

import { QrCode, useQrCode } from '@destyler-ui/react'

export function RootProvider() {
  const qrCode = useQrCode({ defaultValue: 'https://destyler.org' })

  return (
    <>
      <button onClick={() => qrCode.setValue('https://elonehoo.me')}>
        Set Value
      </button>

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

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

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

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

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

<script lang="ts">
  import { QrCode, useQrCode } from '@destyler-ui/svelte'
  const id = $props.id()
  const qrCode = useQrCode({ id, defaultValue: 'https://destyler.org' })
</script>

<button type="button" onclick={() => qrCode().setValue('https://elonehoo.me')}>Set Value</button>
<QrCode.RootProvider value={qrCode}>
  <QrCode.Frame><QrCode.Pattern /></QrCode.Frame>
</QrCode.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultValue`	—	`string` The initial value of the tabs when it is first rendered. Use when you do not need to control the state of the tabs.
`encoding`	—	`qrCode.QrCodeGenerateOptions` The qr code encoding options.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; frame: string; }>` The element ids.
`modelValue`	—	`string` Use this prop to control the value of the qr code via v-model.

Emit	Event
`update:modelValue`	`[value: string]` The callback fired when the model value changes.
`valueChange`	`[details: ValueChangeDetails]` Callback fired when the value changes.

Context

No serializable props or emits are declared for this part.

DownloadTrigger

Prop	Default	Type
`fileName*`	—	`string` The name of the file.
`mimeType*`	—	`DataUrlType` The mime type of the image.
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`quality`	—	`number` The quality of the image.

Frame

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Overlay

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Pattern

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`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`	—	`qrcode.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: qrcode.ValueChangeDetails) => void` Callback fired when the value changes.
`value`	—	`string` The value to encode.

Context

Prop	Default	Type
`children*`	—	`(context: UseQrCodeContext) => ReactNode`

DownloadTrigger

Prop	Default	Type
`fileName*`	—	`string` The name of the file.
`mimeType*`	—	`DataUrlType` The mime type of the image.
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`quality`	—	`number` The quality of the image.

Frame

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Overlay

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Pattern

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseQrCodeReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`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`	—	`qrCode.QrCodeGenerateOptions` The qr code encoding options.
`ids`	—	`Partial<{ root: string; frame: string; }>` The element ids.
`onValueChange`	—	`(details: qrCode.ValueChangeDetails) => void` Callback fired when the value changes.
`value`	—	`string` The value to encode.

Context

Prop	Default	Type
`children*`	—	`(context: UseQrCodeContext) => Element`

DownloadTrigger

Prop	Default	Type
`fileName*`	—	`string` The name of the file.
`mimeType*`	—	`DataUrlType` The mime type of the image.
`asChild`	—	`(props: (userProps?: JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`quality`	—	`number` The quality of the image.

Frame

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.SvgSVGAttributes<SVGSVGElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Overlay

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Pattern

Prop	Default	Type
`asChild`	—	`(props: (userProps?: JSX.PathSVGAttributes<SVGPathElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseQrCodeReturn`
`asChild`	—	`(props: (userProps?: JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultValue`	—	`string`
`encoding`	—	`import("@destyler/qr-code").QrCodeGenerateOptions` The qr code encoding options.
`id`	—	`string`
`ids`	—	`Partial<{ root: string; frame: string; }>` The element ids.
`onValueChange`	—	`(details: import("@destyler/qr-code").ValueChangeDetails) => void` Callback fired when the value changes.
`value`	—	`string` The value to encode.

Context

Prop	Default	Type
`api`	—	`Snippet<[UseQrCodeContext]>`

DownloadTrigger

Prop	Default	Type
`fileName*`	—	`string` The name of the file.
`mimeType*`	—	`DataUrlType` The mime type of the image.
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`
`quality`	—	`number` The quality of the image.

Frame

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"svg">]>`
`children`	—	`Snippet<[]> \| undefined`

Overlay

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Pattern

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("../../../types.js").PropsFn<"path">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UseQrCodeReturn`