1. React QR Reader
Attention!!!!
This repository and library is fork from here https://github.com/JodusNodus/react-qr-reader
Table of contents
- 1. Use Case
- 2. Compatibility
- 3. Installation
- 4. Example Usage
- 5. Component API
- 6. Maintainers
- 7. Browser Support
1. Use Case
You need a component for Scanning QR codes from a web browser based app.
2. Compatibility
This component has been tested in the following browsers:
- Chrome Mac OS & Android
- Firefox Mac OS & Android
- Safari Mac OS & IOS
Since this library does internal use of hooks you need React >= 18.2.0
.
3. Installation
You can install this library via NPM or YARN.
3.1. NPM
npm i react-qr-reader
3.2. YARN
yarn add react-qr-reader
4. Example Usage
After reading and performing the previous steps, you should be able to import the library and use it like in this example:
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
const Test = () => {
const [error, setError] = useState('');
const [data, setData] = useState('');
return (
<div style={styles.container}>
<QrReader
{...args}
onResult={(result, error) => {
if (result) {
setData(result.getText());
}
if (error) {
setError(error.message);
}
}}
/>
<p>The value is: {JSON.stringify(data, null, 2)}</p>
<p>The error is: {error}</p>
</div>
);
};
5. Component API
The QrReader
component has the following props:
Properties | Types | Default Value | Description |
---|---|---|---|
constraints | MediaTrackConstraints | { facingMode: 'user' } |
Specify which camera should be used (if available). |
onResult | function |
none | Scan event handler |
videoId | string |
video |
The ID for the video element |
scanDelay | number |
500 |
The scan period for the QR hook |
ViewFinder | component | none | ViewFinder component to rendering over the video element |
className | string | none | ClassName for the container element. |
containerStyle | object | none | Style object for the container element. |
videoContainerStyle | object | none | Style object for the video container element. |
videoStyle | object | none | Style object for the video element. |
6. Maintainers
-
Current Maintainers @memenashi
-
Original Author @JodusNodus
7. Browser Support
If you need to support older browsers, checkout this guide in how to make it compatible with legacy ones