{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-qr-reader"],"cli":null},"imports":["import { QrReader } from 'react-qr-reader';","import QrReader from 'react-qr-reader';","import React, { useState } from 'react';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}