# react-qr-fast-reader
> Faster qr reader implementation library than react-qr-reader using jsQR to decode images
Latest version **1.0.3** (published 2020-04-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-qr-fast-reader
pnpm add react-qr-fast-reader
yarn add react-qr-fast-reader
bun add react-qr-fast-reader
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-04-02 |
| First published | 2020-03-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 116.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Leonardo Manzella |
| Maintainers | leonardo.manzella |
| Keywords | qr, reader, react |
## Links
- npm: https://www.npmjs.com/package/react-qr-fast-reader
- Repository: https://github.com/LeonardoManzella/react-qr-fast-reader
- Homepage: https://github.com/LeonardoManzella/react-qr-fast-reader#readme
- Issues: https://github.com/LeonardoManzella/react-qr-fast-reader/issues
- npm.io page: https://npm.io/package/react-qr-fast-reader
## Dependencies (2)
- [jsqr](https://npm.io/package/jsqr.md) ^1.2.0
- [node-sass](https://npm.io/package/node-sass.md) ^4.9.3
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2020-04-02
- 1.0.2 — 2020-04-02
- 1.0.1 — 2020-04-02
- 1.0.0 — 2020-03-13
## README
# react-qr-fast-reader
Faster qr reader implementation library than react-qr-reader using jsQR to decode images
# React QR Reader [](https://opensource.org/licenses/MIT)
## Install
You can install this library via NPM or YARN.
### NPM
```bash
npm i react-qr-fast-reader
```
### YARN
```bash
yarn add react-qr-fast-reader
```
## Usage
The usage is really simple:
```javascript
import React, { useState } from 'react';
import { QrReader } from 'react-qr-fast-reader';
const Test = (props) => {
const [data, setData] = useState('No result');
const handleScan = (data) => {
if (data) {
setData(data);
}
};
const handleError = (err) => console.error(err);
return (
<>
{data}
);
};
```
## Props
### Events
| Prop | Argument | Description |
| ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onScan | `result` | Scan event handler. Called every scan with the decoded value or `null` if no QR code was found. |
| onError | `Error` | Called when an error occurs. |
| onLoad | `object` | Called when the component is ready for use. Object properties are `stream`: [MediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) |
### Options
| Prop | Type | Default | Description |
| --------------------- | ----------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| facingMode | `user` or `environment` | `environment` | Specify which camera should be used (if available). |
| resolution | number | `600` | The resolution of the video (or image in legacyMode). Larger resolution will increase the accuracy but it will also slow down the processing time. |
| style | a valid React style | none | Styling for the container element. **Warning** The preview will always keep its 1:1 aspect ratio. |
| className | string | none | ClassName for the container element. |
| showViewFinder | boolean | `true` | Show or hide the build in view finder. See demo |
| constraints | object | `null` | Use custom camera constraints that the override default behavior. [MediaTrackConstraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints) |
| debug | boolean | `null` | Enable debug logs to see what's going on inside the component |
| viewFinderColor | string | `'rgba(255, 0, 0, 0.5)'` | Change viewFinder color for SVG Path |
| viewFinderStrokeWidth | string | `'5'` | Change viewFinder width for SVG Path |
## Tested platforms
- Chrome Mac OS & Android
- Firefox Mac OS & Android
- Safari Mac OS & IOS
## Issues
Please, open an [issue](https://github.com/LeonardoManzella/react-qr-fast-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/LeonardoManzella/react-qr-fast-reader/blob/master/CONTRIBUTING.md) for more information.
## License
Distributed under the **MIT license**. See [LICENSE](https://github.com/LeonardoManzella/react-qr-fast-reader/blob/master/LICENSE) for more information.
---
_Source: https://npm.io/package/react-qr-fast-reader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._