Skip to content
Destyler UI Destyler UI Destyler UI
Docs
QR Code

QR Code

A QR (Quick Response) Code is used to provide information or link which can be accessed by scanning the code with an app or a smartphone.

Features

Install

Install the component from your command line.

Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/qr-code @destyler/vue
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/qr-code @destyler/react
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/qr-code @destyler/svelte
Terminal window 
      
        

          

            npm
             
            install
             
            @destyler/qr-code @destyler/solid

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
  import * as qrCode from "@destyler/qr-code"
  import { normalizeProps, useMachine } from "@destyler/vue"
  import { useId } from 'vue'


  const [state, send] = useMachine(
    qrCode.machine({
      id: useId(),
      value: "https://github.com/destyler",
    }),
  )


  const api = computed(() => qrCode.connect(state.value, send, normalizeProps))
</script>


<template>
  <div v-bind="api.getRootProps()">
    <svg v-bind="api.getFrameProps()">
      <path v-bind="api.getPatternProps()" />
    </svg>
    <div v-bind="api.getOverlayProps()">
      <img
        src="https://github.com/destyler.png"
        alt=""
      />
    </div>
  </div>
</template>
import * as qrCode from "@destyler/qr-code"
import { useMachine, normalizeProps } from "@destyler/react"
import { useId } from "react"


export function QRCode() {
  const [state, send] = useMachine(
    qrCode.machine({
      id: useId(),
      value: "https://github.com/destyler",
    }),
  )


  const api = qrCode.connect(state, send, normalizeProps)


  return (
    <div {...api.getRootProps()}>
      <svg {...api.getFrameProps()}>
        <path {...api.getPatternProps()} />
      </svg>
      <div {...api.getOverlayProps()}>
        <img
          src="https://github.com/destyler.png"
          alt=""
        />
      </div>
    </div>
  )
}
<script lang="ts">
  import * as qrCode from "@destyler/qr-code"
  import { normalizeProps, useMachine } from "@destyler/svelte"
  import { qrCodeControls } from '@destyler/shared'




  const id = $props.id()


  const [state, send] = useMachine(
    qrCode.machine({
      id
    }),
  )


  const api = $derived(qrCode.connect(state, send, normalizeProps))
</script>


<div {...api.getRootProps()}>
  <svg {...api.getFrameProps()}>
    <path {...api.getPatternProps()} />
  </svg>
  <div {...api.getOverlayProps()}>
    <img
      src="https://github.com/destyler.png"
      alt=""
    />
  </div>
</div>
import * as qrCode from '@destyler/qr-code'
import { qrCodeControls } from '@destyler/shared'
import { normalizeProps, useMachine } from '@destyler/solid'
import { createMemo, createUniqueId } from 'solid-js'


export default function QrCode() {
  const controls = useControls(qrCodeControls)
  const id = createUniqueId()


  const [state, send] = useMachine(
    qrCode.machine({
      id,
    }),
  )


  const api = createMemo(() => qrCode.connect(state, send, normalizeProps))


  return (
    <>
      <div {...api().getRootProps()} >
        <svg {...api().getFrameProps()} >
          <path {...api().getPatternProps()} />
        </svg>
        <div {...api().getOverlayProps()} >
          <img
            src="https://github.com/destyler.png"
            alt=""
          />
        </div>
      </div>
    </>
  )
}

Setting the QR Code value

To set the value of the QR code, pass the value property to the machine.

const [state, send] = useMachine(
  qrCode.machine({
    value: "https://example.com",
  }),
)

Setting the correction level

Error correction allows for the QR code to be blocked or resized while still recognizable. In some cases where the link is too long or the logo overlay covers a significant area, the error correction level can be increased.

The QR Code accepts the following error correction levels:

  • 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

To set the error correction level, pass the encoding.ecc or encoding.boostEcc context property.

const [state, send] = useMachine(
  qrCode.machine({
    encoding: { ecc: "H" },
  }),
)

The alternative is to enlarge the QR Code by increasing the size of the svg element.

To add a logo overlay to the QR code, render the image part. The logo will be automatically centered within the QR code.

<!-- ... -->
<template>
  <div v-bind="api.getRootProps()">
    <svg v-bind="api.getFrameProps()">
      <path v-bind="api.getPatternProps()" />
    </svg>
      <div v-bind="api.getOverlayProps()">
        <img src="..." alt="..." />
      </div>
  </div>
</template>
// ...
export function QRCode() {
  return (
    <div {...api.getRootProps()}>
      <svg {...api.getFrameProps()}>
        <path {...api.getPatternProps()} />
      </svg>
        <div {...api.getOverlayProps()}>
          <img src="..." alt="..." />
        </div>
    </div>
  )
}
// ...
<div {...api.getRootProps()}>
  <svg {...api.getFrameProps()}>
    <path {...api.getPatternProps()} />
  </svg>
    <div {...api.getOverlayProps()}>
      <img src="..." alt="..." />
    </div>
</div>
// ...
export default function QrCode() {
  return (
    <>
      <div {...api().getRootProps()} >
        <svg {...api().getFrameProps()} >
          <path {...api().getPatternProps()} />
        </svg>
          <div {...api().getOverlayProps()} >
            <img src="..." alt="..." />
          </div>
      </div>
    </>
  )
}

Change the color

To change the color of the QR Code, set the fill attribute on the path part.

[data-scope="qr-code"][data-part="pattern"] {
  fill: green;
}

To change the background color of the QR code, set the background-color

[data-scope="qr-code"][data-part="frame"] {
  background-color: white;
}

Styling guide

Earlier, we mentioned that each QR Code part has a data-part attribute added to them to select and style them in the DOM.

[data-scope="qr-code"][data-part="root"] {
  /* Styles for the root part */
}


[data-scope="qr-code"][data-part="frame"] {
  /* Styles for the svg part */
}


[data-scope="qr-code"][data-part="pattern"] {
  /* Styles for the path */
}


[data-scope="qr-code"][data-part="overlay"] {
  /* Styles for the logo */
}

Methods and Properties

Machine Context

The QR Code machine exposes the following context properties:

value
string
The value to encode.
ids
Partial<{ root: string; frame: string; }>
The element ids.
encoding
QrCodeGenerateOptions
The qr code encoding options.
onValueChange
(details: ValueChangeDetails) => void
Callback fired when the value changes.
dir(default: "ltr")
"ltr" | "rtl"
The document's text/writing direction.
id
string
The unique identifier of the machine.
getRootNode
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Machine API

The QR Code api exposes the following methods:

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.

Data Attributes

Root

attribute
description
data-scope
qr-code
data-part
root

Frame

attribute
description
data-scope
qr-code
data-part
frame

Pattern

attribute
description
data-scope
qr-code
data-part
pattern

Overlay

attribute
description
data-scope
qr-code
data-part
overlay

DownloadTrigger

attribute
description
data-scope
qr-code
data-part
download-trigger

Carousel

Timer