Components

QrCode

Shows a finished payload as a QR code, with dark modules on a light background in every theme and in print.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { QrCode } from '@bigbang/ui';
Source: QrCode.tsx
Storybook: QrCode · Playground

QrCode is in the @bigbang/ui package. It encodes with uqr; the drawing is the component’s own SVG.

import { QrCode } from '@bigbang/ui';

<QrCode
  value={payment.link}
  label="Payment link QR code"
  caption={`Reference: ${payment.reference}`}
/>;

The QR_QUIET_ZONE constant gives the quiet zone in modules (4).

Props

valueRequired

Description: The finished payload, such as a payment link or a TR Karekod string from the server. The component encodes it as given and never builds it.
Type: string

size

Description: Width and height in pixels, quiet zone included. Shrinks to fit a narrower container.
Type: number
Default: 192

ecc

Description: Error correction level: M recovers about 15 % of the code, Q about 25 %. A logo always uses Q.
Type: 'M' | 'Q'
Default: 'M'

logo

Description: A small mark drawn in the centre, such as the brand logo. It covers some modules, so the code switches to Q. Hidden from screen readers.
Type: ReactNode

labelRequired

Description: Accessible name of the code, such as "Ödeme bağlantısı QR kodu".
Type: string

caption

Description: Visible text under the code, such as the payment reference and the domain to compare. Never leave the QR code as the only way to reach the content.
Type: ReactNode

className

Description: Added to the root element; use it for layout only.
Type: string

Data attributes

data-component="qr-code": on the root element.
data-ecc: the error correction level in use, M or Q.
data-part: frame, logo, caption.