Menu Close

Easily scan QR and ean codes in your React application

Easily scan QR and ean codes in your React application



npm i react-zxing

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({ onResult(result) { setResult(result.getText()); }, }); return ( <> <video ref={ref} /> <p> <span>Last result:</span> <span>{result}</span> </p> </> ); };

With specific device ID

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} />; };

Advanced Usage


⚠️ 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
onResult function Called when a result is found. The result is an instance of


onError function Called when an error is found. The error is an instance of Error.
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.
View Source Code
Posted in React, TypeScript