gms-scanner-fl

A versatile, mobile-friendly QR / barcode scanner React component powered by @zxing/browser.

Installation

npm i gms-scanner-fl
# or
yarn add gms-scanner-fl

Quick Start

import { GmsScannerFl } from 'gms-scanner-fl';

export default function MyScanner() {
  return (
    <GmsScannerFl
      onResult={(text) => console.log('Scanned value:', text)}
    />
  );
}

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | onResult (required) | (text: string) => void | — | Callback fired when a code is successfully decoded. | | onError | (err: any) => void | — | Callback fired when the underlying camera / decoding throws an error. | | onCamerasFound | (devices: MediaDeviceInfo[]) => void | — | Callback fired once with a list of available video input devices. | | className | string | — | Additional classes on the video container. | | shape | 'square' \| 'rect-tall' \| 'rect-wide' \| 'long-barcode' | "square" | Aspect ratio of the scanning window. | | borderType | 'corner' \| 'full' \| 'dashed' | "corner" | Style of the scanning window border. | | borderColor | string | "#FFFFFF" | Border colour (hex/RGB/etc.). | | showOverlay | boolean | true | Whether to dim the rest of the video outside the scanning window. | | qrBoxSize | number | 85 | Size of the scanning window in % of video width/height. | | borderWidth | number | 4 | Border thickness in pixels. | | overlayOpacity | number | 0.6 | Darkness of the overlay mask (0-1). | | features | { pinchZoom?: boolean; focus?: boolean; flash?: boolean; rotate?: boolean; audioFeedback?: boolean; brightnessControl?: boolean; cameraMirror?: boolean; autoFocus?: boolean; continuousScan?: boolean; } | see below | Enable / disable individual UX features. | | branding | React.ReactNode | - | A React node (e.g. an <img> tag) to display at the top of the scanner. | | defaultDeviceId | string | — | The deviceId of the camera to use by default. | | paused | boolean | false | When true, the scanner video feed and decoding are paused. | | scanSoundVolume | number | 0.5 | Volume of the scan success sound (0-1). | | scanDelay | number | 1000 | Delay between scans in continuous mode (milliseconds). |

Features Defaults

{
  pinchZoom: true,        // Two-finger pinch to zoom (if camera supports it)
  focus: true,            // Tap-to-focus & hold-to-lock
  flash: true,            // Flash/torch toggle (if supported)
  rotate: true,           // Switch between front / back cameras
  audioFeedback: true,    // Play a beep sound on successful scan
  brightnessControl: true, // Show a slider to control video brightness
  cameraMirror: false,    // Mirror the camera feed horizontally
  autoFocus: true,        // Automatically focus camera when loaded
  continuousScan: false   // Continuously scan for codes instead of stopping after first scan
}

Disable a feature by passing false, e.g.:

<GmsScannerFl onResult={...} features={{ flash: false }} />

Advanced Features

Enable camera mirroring for selfie-style scanning:

<GmsScannerFl 
  onResult={...} 
  features={{ cameraMirror: true }} 
/>

Enable continuous scanning for multiple codes:

<GmsScannerFl 
  onResult={...} 
  features={{ continuousScan: true }}
  scanDelay={2000} // 2 seconds between scans
  scanSoundVolume={0.3} // Lower volume
/>

Custom Branding

You can pass any React node to the branding prop. For example, to add your logo:

<GmsScannerFl
  onResult={...}
  branding={
    <img
      src="/path/to/your/logo.png"
      alt="My Company"
      style={{ width: 100, opacity: 0.8 }}
    />
  }
/>

License

MIT © Your Name