Registry / web-framework / react-qr-reader

react-qr-reader

library3.0.0-beta-1jsnpmunverified

react-qr-reader is a React component designed for scanning QR codes directly from a user's webcam within a web browser application. Currently in `3.0.0-beta-1`, it is actively developed and compatible with React versions 16.8.0 and higher due to its internal use of React Hooks. The library leverages `jsQR` for QR code detection and `webrtc-adapter` for camera access, ensuring broad browser compatibility across Chrome, Firefox, and Safari on various operating systems including macOS, Android, and iOS. Key features include support for different camera facing modes, customizable scan delays, and a prop-driven API for integration into React applications. It primarily serves use cases requiring real-time QR code scanning in web environments.

web-framework

npm install react-qr-reader

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-QR-READER

react-qr-reader

web-frameworkjavascriptv3.0.0-beta-1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QrReader

✓ import { QrReader } from 'react-qr-reader';

✗ const QrReader = require('react-qr-reader');

The library primarily uses ES Module imports. CommonJS `require` is not the recommended or typical way to import components in modern React applications.

QrReader (default import)

✓ import QrReader from 'react-qr-reader';

✗ import { QrReader } from 'react-qr-reader';

While named import `{ QrReader }` is shown in the example, some setups might support or expect a default import depending on build configurations. However, the official example uses named import.

React & useState

✓ import React, { useState } from 'react';

✗ import { useState } from 'react'; import React from 'react';

Standard React and Hooks imports, necessary for using the component within a functional React component with state.

This quickstart demonstrates how to integrate the QrReader component into a React functional component, capture scanned QR code data using state, and handle potential errors during scanning. It also shows how to configure camera constraints and styling.

import React, { useState } from 'react'; import { QrReader } from 'react-qr-reader'; const MyQrScanner = () => { const [scanResult, setScanResult] = useState('No result'); return ( <div style={{ width: '50%', margin: '0 auto' }}> <h2>QR Code Scanner</h2> <QrReader onResult={(result, error) => { if (!!result) { setScanResult(result?.text); } if (!!error) { // console.info(error); // Uncomment for debugging errors } }} constraints={{ facingMode: 'environment' }} // Prefer rear camera scanDelay={300} // Reduce delay for faster scans videoContainerStyle={{ padding: '20px', border: '1px solid #ddd' }} videoStyle={{ maxHeight: '300px' }} /> <p style={{ marginTop: '20px', fontWeight: 'bold' }}>Scanned Data: {scanResult}</p> {scanResult === 'No result' && <p>Point your camera at a QR code.</p>} </div> ); }; export default MyQrScanner;

Debug

Known issues

breakingVersion 2.0.0 changed how camera devices are selected, moving from `deviceId` to `facingMode`. This was a significant change for iOS 11 Safari support and better camera control.

fix

Replace `deviceId` prop with `constraints` prop, specifying `facingMode: 'user'` for front camera or `facingMode: 'environment'` for rear camera. Example: `<QrReader constraints={{ facingMode: 'environment' }} />`.

affects: >=2.0.0

breakingThe component requires `React >= 16.8.0` due to its internal reliance on React Hooks. Older React versions will not work.

fix

Upgrade your project's `react` and `react-dom` dependencies to `^16.8.0` or higher. Ensure your `package.json` reflects these peer dependencies.

affects: >=2.0.0

gotchaCamera access requires HTTPS in production environments for `getUserMedia` to function correctly. Without HTTPS, the browser will block camera access, leading to `NotAllowedError` or similar errors.

fix

Ensure your application is served over HTTPS when deploying to production. For local development, `localhost` is usually treated as a secure context.

affects: all

gotchaOn iOS 11 Safari and other platforms without full `getUserMedia` support, the library might throw an error or behave unexpectedly. Version 2.0.1 specifically added error throwing for platforms without GUM support.

fix

Implement robust error handling in the `onResult` prop to gracefully inform users if their device or browser does not support webcam access. Consider providing a fallback mechanism, like uploading an image, if QR scanning isn't possible.

affects: >=2.0.1

deprecatedOlder versions of the `jsQR` library used might be slower or less efficient. Version 1.1.2 upgraded to a faster fork of `jsQR`.

fix

Update `react-qr-reader` to the latest stable version to benefit from performance improvements in QR code detection.

affects: <1.1.2

Errors

Common errors & fixes

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Using `react-qr-reader` with an older version of React that does not support Hooks, or violating rules of hooks.

fix

Ensure your `react` and `react-dom` dependencies are `^16.8.0` or higher. Also, make sure the component is rendered within a proper React functional component context.

NotAllowedError: Permission denied

The user denied camera access, or the page is not being served over HTTPS in a production environment.

fix

Instruct users to grant camera permissions. For production, ensure your application is deployed over HTTPS. For local development, `localhost` is typically allowed.

TypeError: Cannot read properties of undefined (reading 'text')

Attempting to access `result.text` when `result` is null or undefined, which can happen if `onResult` is called with an error or no valid QR code detected.

fix

Add a null-check for `result` before accessing its properties within the `onResult` callback: `if (!!result) { setData(result.text); }`

MediaStreamError: ConstraintsNotSatisfiedError

The requested `constraints` (e.g., `facingMode: 'environment'`) cannot be met by the available camera devices.

fix

Review the `constraints` prop. The requested camera (front/rear) might not be available or the device doesn't support the specified resolution/aspect ratio. Consider more generic `constraints` or provide user options to select cameras.

Upgrade

Version history

3.0.0-beta-1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React Hooks functionality.

react-domrequiredPeer dependency for rendering React components.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/react-qr-reader/react-qr-reader ↗

packagehttps://www.npmjs.com/package/react-qr-reader ↗