{"id":11834,"library":"react-qr-reader","title":"React QR Reader","description":"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.","status":"active","version":"3.0.0-beta-1","language":"javascript","source_language":"en","source_url":"https://github.com/react-qr-reader/react-qr-reader","tags":["javascript","react","qr","qrcode","qrreader","typescript"],"install":[{"cmd":"npm install react-qr-reader","lang":"bash","label":"npm"},{"cmd":"yarn add react-qr-reader","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-qr-reader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Hooks functionality.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The library primarily uses ES Module imports. CommonJS `require` is not the recommended or typical way to import components in modern React applications.","wrong":"const QrReader = require('react-qr-reader');","symbol":"QrReader","correct":"import { QrReader } from 'react-qr-reader';"},{"note":"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.","wrong":"import { QrReader } from 'react-qr-reader';","symbol":"QrReader (default import)","correct":"import QrReader from 'react-qr-reader';"},{"note":"Standard React and Hooks imports, necessary for using the component within a functional React component with state.","wrong":"import { useState } from 'react';\nimport React from 'react';","symbol":"React & useState","correct":"import React, { useState } from 'react';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport { QrReader } from 'react-qr-reader';\n\nconst MyQrScanner = () => {\n  const [scanResult, setScanResult] = useState('No result');\n\n  return (\n    <div style={{ width: '50%', margin: '0 auto' }}>\n      <h2>QR Code Scanner</h2>\n      <QrReader\n        onResult={(result, error) => {\n          if (!!result) {\n            setScanResult(result?.text);\n          }\n\n          if (!!error) {\n            // console.info(error); // Uncomment for debugging errors\n          }\n        }}\n        constraints={{ facingMode: 'environment' }} // Prefer rear camera\n        scanDelay={300} // Reduce delay for faster scans\n        videoContainerStyle={{ padding: '20px', border: '1px solid #ddd' }}\n        videoStyle={{ maxHeight: '300px' }}\n      />\n      <p style={{ marginTop: '20px', fontWeight: 'bold' }}>Scanned Data: {scanResult}</p>\n      {scanResult === 'No result' && <p>Point your camera at a QR code.</p>}\n    </div>\n  );\n};\n\nexport default MyQrScanner;","lang":"typescript","description":"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."},"warnings":[{"fix":"Replace `deviceId` prop with `constraints` prop, specifying `facingMode: 'user'` for front camera or `facingMode: 'environment'` for rear camera. Example: `<QrReader constraints={{ facingMode: 'environment' }} />`.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Upgrade your project's `react` and `react-dom` dependencies to `^16.8.0` or higher. Ensure your `package.json` reflects these peer dependencies.","message":"The component requires `React >= 16.8.0` due to its internal reliance on React Hooks. Older React versions will not work.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your application is served over HTTPS when deploying to production. For local development, `localhost` is usually treated as a secure context.","message":"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.","severity":"gotcha","affected_versions":"all"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.1"},{"fix":"Update `react-qr-reader` to the latest stable version to benefit from performance improvements in QR code detection.","message":"Older versions of the `jsQR` library used might be slower or less efficient. Version 1.1.2 upgraded to a faster fork of `jsQR`.","severity":"deprecated","affected_versions":"<1.1.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Using `react-qr-reader` with an older version of React that does not support Hooks, or violating rules of hooks.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Instruct users to grant camera permissions. For production, ensure your application is deployed over HTTPS. For local development, `localhost` is typically allowed.","cause":"The user denied camera access, or the page is not being served over HTTPS in a production environment.","error":"NotAllowedError: Permission denied"},{"fix":"Add a null-check for `result` before accessing its properties within the `onResult` callback: `if (!!result) { setData(result.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.","error":"TypeError: Cannot read properties of undefined (reading 'text')"},{"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.","cause":"The requested `constraints` (e.g., `facingMode: 'environment'`) cannot be met by the available camera devices.","error":"MediaStreamError: ConstraintsNotSatisfiedError"}],"ecosystem":"npm"}