React QR Reader

Common errors

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

  cause 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

  cause 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')

  cause 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

  cause 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.

Warnings

• breaking Version 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' }} />`.
• breaking The 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.
• gotcha Camera 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.
• gotcha On 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.
• deprecated Older 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.

Install

• npm install react-qr-reader npm
• yarn add react-qr-reader yarn
• pnpm add react-qr-reader pnpm

Imports

• QrReader
  wrong:

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

  correct:

  import { QrReader } from '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)
  wrong:

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

  correct:

  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
  wrong:

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

  correct:

  import React, { useState } from 'react';

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

Quickstart

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;