Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jodusnodus/react-qr-reader
React component for reading QR codes from webcam.
https://github.com/jodusnodus/react-qr-reader
javascript qr-code qrcode react reactjs webcam webrtc
Last synced: about 3 hours ago
JSON representation
React component for reading QR codes from webcam.
- Host: GitHub
- URL: https://github.com/jodusnodus/react-qr-reader
- Owner: JodusNodus
- License: mit
- Created: 2016-05-14T08:12:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-11-27T17:58:07.000Z (10 months ago)
- Last Synced: 2024-01-31T07:47:04.139Z (8 months ago)
- Topics: javascript, qr-code, qrcode, react, reactjs, webcam, webrtc
- Language: TypeScript
- Homepage: https://jodusnodus.github.io/react-qr-reader
- Size: 3.81 MB
- Stars: 1,082
- Watchers: 19
- Forks: 396
- Open Issues: 141
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React QR Reader [](https://badge.fury.io/js/react-qr-reader) [](https://opensource.org/licenses/MIT) [](https://snyk.io/test/github/react-qr-reader/react-qr-reader)
:rocket: React QR Reader component. Check out the [demo](https://react-qr-reader.github.io/react-qr-reader/).
## Table of contents
- [Use Case](#use-case)
- [Compatibility](#compatibility)
- [Installation](#installation)
- [NPM](#npm)
- [YARN](#yarn)
- [Example Usage](#example-usage)
- [QrReader API](#component-api)
- [Browser support](#browser-support)
- [Issues](#issues)
- [Contributing](#contributing)
- [License](#license)
## Use Case
You need a component for Scanning QR codes from a web browser based app.
## 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 >= 16.8.0`.
## Installation
You can install this library via NPM or YARN.
### NPM
```bash
npm i react-qr-reader
```
### YARN
```bash
yarn add react-qr-reader
```
## Example Usage
After reading and performing the previous steps, you should be able to import the library and use it like in this example:
```javascript
import React, { useState } from 'react';
import { QrReader } from 'react-qr-reader';
const Test = (props) => {
const [data, setData] = useState('No result');
return (
<>
{
if (!!result) {
setData(result?.text);
}
if (!!error) {
console.info(error);
}
}}
style={{ width: '100%' }}
/>
{data}
>
);
};
```
## Component API
The `QrReader` component has the following props:
| Properties | Types | Default Value | Description |
| ------------------- | ----------------------------------------------------------------------------------------------- | ------------------------ | -------------------------------------------------------- |
| constraints | [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/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. |
## Maintainers
- Created by [@JodusNodus](https://github.com/JodusNodus) .
- Revived thanks to [@JonatanSalas](https://github.com/JonatanSalas) and his company [@BlackBoxVision](https://github.com/BlackBoxVision) .
## Browser Support
If you need to support older browsers, checkout [this guide](https://github.com/zxing-js/library#browser-support) in how to make it compatible with legacy ones
## Issues
Please, open an [issue](https://github.com/react-qr-reader/react-qr-reader/issues) following one of the issues templates. We will do our best to fix them.
## Contributing
If you want to contribute to this project see [contributing](https://github.com/react-qr-reader/react-qr-reader/blob/master/CONTRIBUTING.md) for more information.
## License
Distributed under the **MIT license**. See [LICENSE](https://github.com/react-qr-reader/react-qr-reader/blob/master/LICENSE) for more information.