Build / Atoms

QRCode

atom
play-fn

A QR code — the matrix, plated, with the mark in the middle.

Deck encodes nothing. This draws a code you supply, either as src or as inline SVG, which is why there is no QR library in the dependency list and why src/components stays dependency-free. Generate the code upstream.

It draws only the code. It used to also carry a caption above and the URL beneath, which made an atom responsible for the layout around it — three jobs, and two of them the parent's. The surfaces that need a heading or a readable link compose them.

import { QRCode } from '@meetcard/deck'

Example

<QRCode value="meetcard.io/ben@meetcard" size="lg"> <MatrixSvg /> </QRCode>

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

The mark sits in the centre the generator reserved for it.

Default

Source

const Default = () => <QRCode value="meetcard.io/ben@meetcard"><Matrix /></QRCode>;

Every size. md is for a share sheet; lg for a screen held up to be scanned.

Sizes

Source

const Sizes = (args) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
    {(['sm', 'md', 'lg'] as const).map((size) => (
      <QRCode key={size} {...args} size={size}>
        <Matrix />
      </QRCode>
    ))}
  </div>
);

A bare matrix. Use this when the code was generated without a reserved centre — a mark laid over live modules is a code that will not scan.

Without Mark

Source

const WithoutMark = () => <QRCode value="meetcard.io/ben@meetcard" logo={null}><Matrix /></QRCode>;

The share view — as large as the viewport allows, held up to be scanned.

Share View

Source

const ShareView = () => <QRCode value="meetcard.io/ben@meetcard" size="xl"><Matrix /></QRCode>;

Props

Prop	Type	Default	Description
`value`required	`string`	—	The URL the code encodes, e.g. `meetcard.io/ben@meetcard`. Not rendered. It is the code's accessible name, so someone who cannot scan still learns where it goes. Surfaces that want the link readable — `ShareSheet` does — put it next to the code as copyable text, which is more useful than a caption nobody can select.
`children`	`ReactNode`	—	Inline `<svg>` alternative to `src`, for a locally rendered code.
`logo`	`ReactNode`	`<Mark />`	The centre mark. Defaults to MeetCard's, since every code Deck draws is a MeetCard code. Pass `null` for a bare matrix. It sits directly on the code with nothing behind it, because generators reserve the centre when a logo is configured. A code generated without that reservation has modules under the mark and should be given `null`.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	—
`src`	`string`	—	Rendered QR image, e.g. a generated PNG or SVG data URI.

Also accepts everything from Omit, so id, data-* and event handlers pass straight through.