QRScanner

organisms

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

ARIA Role: region

Demo

||||| | ||| || | || |||||

EPL-2026-00042

QR-EPL-2026-00042

Props

PropTypeRequiredDefaultDescription
scanResultStatesScanResultStatesYes—

TypeScript Interface

interface QRScannerProps {
  onScan: (code: string) => Promise<ScanResult>;
  scanResultStates: { valid: string; invalid: string; alreadyCheckedIn: string };
  cameraPermissionState?: 'granted' | 'denied' | 'prompt';
  manualEntryEnabled?: boolean;
  onManualEntry?: (code: string) => void;
  recentScans?: { code: string; result: 'valid' | 'invalid' | 'duplicate'; timestamp: string }[];
}

Assertions (NASA Rule 5)

  • [type]onScan must be async and resolve to a ScanResult discriminated union (NASA Rule 7)(NASA Rule 7)
  • [aria]Live region announces scan results; camera region has role='region' aria-label='QR scanner'(WCAG 4.1.3)

Usage

Import

import { Qrscanner } from '@epasslive/design-system'

Basic

<Qrscanner />

With Variants

<Qrscanner variant="primary" size="md" />