@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.
- 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.
Install @alzera/react-scanner
using your preferred package manager:
npm install @alzera/react-scanner
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.
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>
);
};
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. |
Simple component wrapper for barcode-detector library.
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>
);
};
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. |
Simple component wrapper for barcode-detector library.
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>
);
};
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. |
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.
Name | Type | Description |
---|---|---|
opts | BarcodeDetectorOptions | Exposed BarcodeScanner config, more on here. |
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 |
The useCamera
hook is designed to facilitate easy to use camera.
Name | Type | Description |
---|---|---|
enabled | boolean | Enable or disable the camera |
onError | (error: any) => void | Callback function triggered when an error occurs during scanning. |
facingMode | 'user' | 'environment' | undefined | Set the camera facing mode. |
useLastDeviceId | boolean | Use the last selected device id. |
Name | Type | Description |
---|---|---|
preview | 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. |
We welcome contributions! Feel free to open issues, create pull requests, or provide feedback.
Happy scanning! ๐ท ๐