DisplayReact

QR Code

Draws a QR code for a text, such as a link, a ticket or a Wi-Fi setting, as an SVG image that scales without blurring.

Rendered by React 19.3.1

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

export default function QRCodeExample() {
  return (
    <QrCode.Root className="qr-code" value="https://example.com/r/42">
      <QrCode.Frame className="qr-code-frame">
        <QrCode.Pattern />
      </QrCode.Frame>
    </QrCode.Root>
  )
}

Not measured yetTests passing in React

Not measured yetSize

Not measured yetMemory

Not measured yetSpeed

[N] commits

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<QrCode.Root>
  <QrCode.Frame>
    <QrCode.Pattern />
  </QrCode.Frame>
</QrCode.Root>

// Not in this example: QrCode.DownloadTrigger, QrCode.Overlay

Examples

Logo

The same link at level H, with a logo in an Overlay over the middle.

QRCodeLogo.tsx

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

export default function QRCodeLogoExample() {
  return (
    <QrCode.Root className="qr-code" value="https://example.com/r/42" errorCorrection="H">
      <QrCode.Frame className="qr-code-frame">
        <QrCode.Pattern />
      </QrCode.Frame>
      <QrCode.Overlay className="qr-code-overlay">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z" />
        </svg>
      </QrCode.Overlay>
    </QrCode.Root>
  )
}

Download

Two DownloadTriggers that save the code as a PNG and as an SVG file named ticket-42.

QRCodeDownload.tsx

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

export default function QRCodeDownloadExample() {
  return (
    <QrCode.Root className="qr-code" value="https://example.com/r/42">
      <QrCode.Frame className="qr-code-frame">
        <QrCode.Pattern />
      </QrCode.Frame>
      <div className="qr-code-actions">
        <QrCode.DownloadTrigger className="button" fileName="ticket-42">
          Download PNG
        </QrCode.DownloadTrigger>
        <QrCode.DownloadTrigger className="button" fileName="ticket-42" type="image/svg+xml">
          Download SVG
        </QrCode.DownloadTrigger>
      </div>
    </QrCode.Root>
  )
}

Overflow

A button that swaps the link for a 3000-character text, which marks every part and disables the download.

QRCodeOverflow.tsx

import * as React from 'react'
import { QrCode } from '@hamur/react/qr-code'

const short = 'https://example.com/r/42'
const long = `${short}#${'x'.repeat(2975)}`

export default function QRCodeOverflowExample() {
  const [value, setValue] = React.useState(short)
  return (
    <div className="stack">
      <QrCode.Root className="qr-code" value={value}>
        <QrCode.Frame className="qr-code-frame">
          <QrCode.Pattern />
        </QrCode.Frame>
        <p className="muted qr-code-note">Too long for a QR code</p>
        <QrCode.DownloadTrigger className="button">Download PNG</QrCode.DownloadTrigger>
      </QrCode.Root>
      <button
        type="button"
        className="button"
        onClick={() => setValue(value === short ? long : short)}
      >
        {value === short ? 'Use a long text' : 'Use a short text'}
      </button>
      <p className="muted qr-code-log">{value.length} characters</p>
    </div>
  )
}

API reference

11 props across 5 parts, in React syntax. className, style, render are listed once, under Shared props.

DownloadTrigger`QrCode.DownloadTrigger`

A button that downloads the symbol as a PNG or SVG file, in the colours the code is shown in. Disabled while the value does not fit. Renders a <button>.

DownloadTrigger props
Prop	Type	Default
`nativeButton`Whether the component renders a native `<button>` element when replacing it	`boolean`	`true`
`fileName`The name of the downloaded file; the extension of `type` is added when missing.	`string`	`'qr-code'`
`type`The file format.	`QrCodeDownloadType`	`'image/png'`
`scale`The CSS pixels per module of a PNG, an integer of at least 1.	`number`	`10`
`focusableWhenDisabled`Whether the button stays focusable when disabled.	`boolean`	`false`

DownloadTrigger data attributes
Data attribute	Description
`data-overflow`	Present while the value does not fit a version 40 symbol.
`data-disabled`	Present when the button is disabled, while the value does not fit.

Frame`QrCode.Frame`

The image of the code, named "QR code: " and the value unless given a name. Holds the Pattern; CSS sizes it, and its background-color is the light colour. Renders a <svg>.

Frame data attributes
Data attribute	Description
`data-overflow`	Present while the value does not fit a version 40 symbol.

Overlay`QrCode.Overlay`

A logo or other content over the code, hidden from assistive technology. The modules under it stay drawn, so use level Q or H with it. Renders a <div>.

Overlay data attributes
Data attribute	Description
`data-overflow`	Present while the value does not fit a version 40 symbol.

Pattern`QrCode.Pattern`

The dark modules, filled with currentColor. Place it inside the Frame. Renders a <path>.

Pattern data attributes
Data attribute	Description
`data-overflow`	Present while the value does not fit a version 40 symbol.

Root`QrCode.Root`

Groups all parts of the QR code and encodes the value into its symbol. Renders a <div>.

Root props
Prop	Type	Default
`value`requiredThe text encoded in the symbol.	`string`	`—`
`errorCorrection`The error correction level requested: `L`, `M`, `Q` or `H`.	`QrCodeErrorCorrection`	`'M'`
`boostErrorCorrection`Whether the level is raised to the highest one that fits the same version.	`boolean`	`true`
`quietZone`The modules of light margin on each side, drawn inside the Frame.	`number`	`4`
`minVersion`The smallest version used, 1 to 40.	`number`	`1`
`labels`The texts, in English by default: the Frame's name and the DownloadTrigger's.	`Partial<QrCodeLabels>`	`—`

Root data attributes
Data attribute	Description
`data-overflow`	Present while the value does not fit a version 40 symbol.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

QrCode has no keys of its own. The image takes no focus; the DownloadTrigger is a native button, so Enter and Space press it, and Tab passes over it while the text does not fit.

Accessibility

What the parts set
Part	Sets	So that
Frame	an `svg` with `role="img"`, named "QR code: " and the text (`labels`), or by `aria-label` or `aria-labelledby`	a screen reader reads what the code holds, which a person who cannot scan it needs most
Frame	while the text does not fit: no role and no name, `aria-hidden="true"`	an empty image is not announced
Pattern	a `path` with no role	the modules are not read one by one
Overlay	`aria-hidden="true"`	the logo does not add a second name to the code
DownloadTrigger	a `button` of type `button` named by its text, or "Download QR code" (`labels`) when it has none; `disabled` while the text does not fit	the button says what it saves, and cannot save an empty file
Root	a `div` with no role	the parts are read in the order they are placed

Focus order

The image is not focusable; focus passes over it.
Each DownloadTrigger is one Tab stop, in the order placed, and none while the text does not fit unless focusableWhenDisabled is set.