QRScanner

Implemented

Live camera-based QR scanner for ticket check-in. Uses BarcodeDetector API with manual entry fallback. Audio + haptic feedback on scan.

Categoryorganisms

Sourcecomponents/organisms/qrscanner/QRScanner.tsx

AI HintUse for complex UI sections. Compose molecules and atoms into page sections.

Vue scanner QR en temps réel pour les agents de porte : zone caméra, dernier scan, compteur de billets scannés. FR-CA : « Scanner QR — porte 4 · Billets scannés · Dernier scan · Admis · Refusé · Doublon ».

QRScanner

Organism — Scanner family (Family 6)

Composant d'affichage (non interactif). Le parent gère la caméra et fournit `lastScan` + `totalScans`. Le mode scanner (admit/reject/duplicate) reflète le verdict du backend.

Scanner QR — porte 4

Billets scannés : 1284

Dernier scan

Admis

EPL-2026-00001

Marie Tremblay

Admission générale

2026-06-24 19:42:15

This component supports light and dark mode.

Props

Prop

Type

Default

Description

lastScan

{ code; mode; ticketTier?; attendee?; at }

—

Résultat du dernier scan.

totalScans*

number

—

Compteur cumulatif.

locale

'fr' | 'en'

fr

Bascule des libellés.

Props

Preview

QRScanner

Prop

Type

Required

Default

Description

scanResultStates

ScanResultStates

Required

—

No description.

lastScan

{ code: string; mode: ScannerMode; ticketTier?: string; attendee?: string; at: string }

Optional

—

Synced from source — no interface JSDoc yet; document on `QRScanner.tsx`.

totalScans

number

Required

—

Synced from source — no interface JSDoc yet; document on `QRScanner.tsx`.

locale

"fr" | "en"

Optional

'fr'

Locale used for formatting and translated strings.

Quick use:<QRScanner />

Accessibility

ARIA roleregion

Usage

Import

tsxSnippet

import { QRScanner } from "@epasslive/design-system"

Example 1

tsxSnippet

<QRScanner />

Example 2

tsxSnippet

<QRScanner variant="default" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources