Easily 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.
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 (
<>
<video ref={ref} />
<p>
<span>Last result:</span>
<span>{result}</span>
</p>
</>
);
};You could either get the device ID from the MediaDevices API yourself or make use of react-media-devices to list available devices:
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 <video ref={ref} />;
};
⚠️ Torch support is not available for iOS devices. See this issue.
You can control the torch by accessing the torch property of the useZxing return value:
import { useZxing } from "react-zxing";
export const BarcodeScanner = () => {
const {
ref,
torch: { on, off, isOn, isAvailable },
} = useZxing();
return (
<>
<video ref={ref} />
{isAvailable ? (
<button onClick={() => (isOn ? off() : on())}>
{isOn ? "Turn off" : "Turn on"} torch
</button>
) : (
<strong>Unfortunately, torch is not available on this device.</strong>
)}
</>
);
};Torch support is limited to devices that support the torch constraint. You can check if torch is available by checking the isAvailable property.
| 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. |
# Install dependencies
yarn
# Build the library
yarn build
# Install example dependencies
yarn --cwd example
# Start the example
yarn --cwd example startExample should now be running on localhost:1234.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent