Integrate zxing to your React application using a custom hook
npm install react-zxingEasily scan QR and ean codes in your React application. Exports a handy useZxing hook that utilizes the popular @zxing/library to stream video to an element and decode codes from it.
``tsx
import { useState } from "react";
import { useZxing } from "react-zxing";
export const BarcodeScanner = () => {
const [result, setResult] = useState("");
const { ref } = useZxing({
onDecodeResult(result) {
setResult(result.getText());
},
});
return (
<>
Last result:
{result}
$3
You could either get the device ID from the
API yourself or make use of react-media-devices to list available devices:`tsx
import { useMediaDevices } from "react-media-devices";
import { useZxing } from "react-zxing";const constraints: MediaStreamConstraints = {
video: true,
audio: false,
};
export const BarcodeScanner = () => {
const { devices } = useMediaDevices({ constraints });
const deviceId = devices?.[0]?.deviceId;
const { ref } = useZxing({
paused: !deviceId,
deviceId,
});
return ;
};
`Advanced Usage
$3
> ⚠️ Torch support is not available for iOS devices. See this issue.
You can control the torch by accessing the
property of the useZxing return value:`tsx
import { useZxing } from "react-zxing";export const BarcodeScanner = () => {
const {
ref,
torch: { on, off, isOn, isAvailable },
} = useZxing();
return (
<>
{isAvailable ? (
) : (
Unfortunately, torch is not available on this device.
)}
);
};
`Torch support is limited to devices that support the
constraint. You can check if torch is available by checking the isAvailable property.Options
Name
Type
Default
Description
onDecodeResult
function
Called when a decode result is found. The result is an instance of
Result
.
onDecodeError
function
Called when an decode error is found. The error is an instance of
Exception
onError
function
Called when any other error occurs, e.g. when the camera stream cannot be accessed.
hints
Map<DecodeHintType, any>
A map of additional parameters to pass to the zxing decoder.
timeBetweenDecodingAttempts
number
300
The time in milliseconds to wait between decoding attempts.
constraints
MediaStreamConstraints
{ video: { facingMode: 'environment' }, audio: false }
The constraints to use when requesting the camera stream.
deviceId
string
You may pass an explicit device ID to stream from.
paused
boolean
false
Stops the camera stream when true.
Development
`sh
Install dependencies
yarn
Build the library
yarn build
Install example dependencies
yarn --cwd example
Start the example
yarn --cwd example start
``Example should now be running on localhost:1234.