Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blackboxvision/react-qr-reader
React component for QR Scanning on web using Zxing library
https://github.com/blackboxvision/react-qr-reader
hooks library qr qr-code-decoder qr-code-reader qr-scanning qrcode-scanner react
Last synced: about 1 month ago
JSON representation
React component for QR Scanning on web using Zxing library
- Host: GitHub
- URL: https://github.com/blackboxvision/react-qr-reader
- Owner: BlackBoxVision
- License: mit
- Created: 2020-03-21T13:08:48.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-20T06:28:38.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T10:37:55.423Z (about 2 months ago)
- Topics: hooks, library, qr, qr-code-decoder, qr-code-reader, qr-scanning, qrcode-scanner, react
- Language: TypeScript
- Homepage:
- Size: 4.04 MB
- Stars: 56
- Watchers: 6
- Forks: 11
- Open Issues: 14
-
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/%40blackbox-vision%2Freact-qr-reader) [](https://opensource.org/licenses/MIT) [](https://snyk.io/test/github/blackboxvision/react-qr-reader)
:rocket: React QR Reader component. Check out the [demo](https://blackboxvision.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 @blackbox-vision/react-qr-reader
```
### YARN
```bash
yarn add @blackbox-vision/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 '@blackbox-vision/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. |
## 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/BlackBoxVision/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/BlackBoxVision/react-qr-reader/blob/master/CONTRIBUTING.md) for more information.
## License
Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-qr-reader/blob/master/LICENSE) for more information.