@alzera/react-scanner

React QR Scanner

@alzera/react-scanner is a lightweight and simple-to-use React library for integrating QR code scanning functionality into your web applications. The primary goal of this library is to provide a hassle-free solution for developers who need a quick and efficient way to incorporate QR code scanning without the bloat.

Features

• Barcode Formats: Support many different barcode formats, more on here.
• Legacy: Support image input as camera fallback.
• Low-level API: Expose low-level API to be able to create your own layout.
• Flash/Torch: Support handling torch when ever possible.

Installation

Install @alzera/react-scanner using your preferred package manager:

npm install @alzera/react-scanner

Components

BarcodeScanner

Combined version of Scanner component and DropZone component, comes with a built-in button that allows users to switch between the scanning mode and the drop zone mode.

Basic Example

import React, { useState } from 'react';
import { BarcodeScanner } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <BarcodeScanner onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

Properties

Name	Type	Description
onScan*	(value: string) => void	Callback function triggered when a QR code is scanned. Passes the scanned data as an argument.
onError	(error: any) => void	Callback function triggered when an error occurs during scanning.
delay	number	Set the delay (in milliseconds) between scans.
aspectRatio	string	Set the aspect ratio of the scanner window, using css aspect-ratio.
decoderOptions	BarcodeDetectorOptions	Exposed BarcodeScanner config, more on here.
switchLabel	(isScanner: boolean) => React.ReactNode	Function to customize the label for the switch component.
dropChildren	React.ReactNode	React node to customize the content of the drop area.
style	React.CSSProperties	Apply custom styles to the scanner component.
className	string	Add custom class names to the scanner component.

Scanner

Simple component wrapper for barcode-detector library.

Basic Example

import React, { useState } from 'react';
import { Scanner } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <Scanner onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

Properties

Name	Type	Description
onScan*	(value: string) => void	Callback function triggered when a QR code is scanned. Passes the scanned data as an argument.
onError	(error: any) => void	Callback function triggered when an error occurs during scanning.
delay	number	Set the delay (in milliseconds) between scans.
aspectRatio	string	Set the aspect ratio of the scanner window, using css aspect-ratio.
decoderOptions	BarcodeDetectorOptions	Exposed BarcodeScanner config, more on here.
style	React.CSSProperties	Apply custom styles to the scanner component.
className	string	Add custom class names to the scanner component.

DropZone

Simple component wrapper for barcode-detector library.

Basic Example

import React, { useState } from 'react';
import { DropZone } from '@alzera/react-scanner';

export default function MyComponent(){
  const [scannedData, setScannedData] = useState('');

  return (
    <div style={{ maxWidth: '500px' }}>
      <DropZone onScan={(d) => d && setScannedData(d)} />
      {scannedData && <p>Scanned Data: {scannedData}</p>}
    </div>
  );
};

Properties

Name	Type	Description
onScan*	(value: string) => void	Callback function triggered when a QR code is scanned. Passes the scanned data as an argument.
onError	(error: any) => void	Callback function triggered when an error occurs during scanning.
children	React.ReactNode	React node to customize the content of the drop area.
decoderOptions	BarcodeDetectorOptions	Exposed BarcodeScanner config, more on here.
style	React.CSSProperties	Apply custom styles to the scanner component.
className	string	Add custom class names to the scanner component.

API

useDecoder

The useDecoder hook is designed to facilitate barcode detection, returning a ref to a decoder function that can be used to decode barcodes from images.

Parameter

Name	Type	Description
opts	BarcodeDetectorOptions	Exposed BarcodeScanner config, more on here.

Return

Type	Description
(imageData: ImageBitmapSourceWebCodecs) => Promise<string | null>	Function that take CanvasImageSourceWebCodecs, Blob or ImageData to be processed and return the decoded string or null if failed

useCamera

The useCamera hook is designed to facilitate easy to use camera.

Parameter

Name	Type	Description
onError	(error: any) => void	Callback function triggered when an error occurs during scanning.
useLastDeviceId	boolean	Use the last selected device id.
autoStart	boolean	Set the initial camera state.
autoPause	boolean	Set if the camera should be paused when the component is not visible.
constraints.audio	boolean	Set if the camera should have audio enabled.
constraints.video	boolean	Set if the camera should have video enabled.

Return

Name	Type	Description
video	React.RefObject<HTMLVideoElement>	Reference object for video element.
camera.capabilities	MediaTrackCapabilities | undefined	Selected camera capabilities.
camera.state	CameraState	Reflect the current camera state, starting, display, stopping, idle.
camera.torch	boolean	State of torch.
device.list	MediaDeviceInfo[]	Reflect available devices options.
device.selected	string | undefined	State of selected device.
device.lastSelected	string | undefined	State of last selected device.

Contributing

We welcome contributions! Feel free to open issues, create pull requests, or provide feedback.

Happy scanning! 📷 🚀