# react-qr-reader

> A React Component for reading QR codes from the webcam

Latest version **3.0.0-beta-1** (published 2022-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-qr-reader
pnpm add react-qr-reader
yarn add react-qr-reader
bun add react-qr-reader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0-beta-1 |
| Published | 2022-02-16 |
| First published | 2016-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1151 |
| Author | thomas billiet |
| Maintainers | jodusnodus |
| Keywords | react, qr, qrcode, qrreader |

## Links

- npm: https://www.npmjs.com/package/react-qr-reader
- Repository: https://github.com/react-qr-reader/react-qr-reader
- Homepage: https://github.com/react-qr-reader/react-qr-reader#readme
- Issues: https://github.com/react-qr-reader/react-qr-reader/issues
- npm.io page: https://npm.io/package/react-qr-reader

## Dependencies (3)

- [rollup](https://npm.io/package/rollup.md) ^2.67.2
- [@zxing/browser](https://npm.io/package/@zxing/browser.md) 0.0.7
- [@zxing/library](https://npm.io/package/@zxing/library.md) ^0.18.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

- 3.0.0-beta-1 (latest) — 2022-02-16
- 2.2.1 — 2019-02-27
- 2.2.0 — 2019-02-26
- 2.1.2 — 2019-01-04
- 2.1.1 — 2018-10-06
- 2.1.0 — 2018-02-19
- 2.0.1 — 2017-11-21
- 2.0.0 — 2017-11-02
- 1.2.1 — 2017-08-07
- 1.2.0 — 2017-08-01
- 1.1.3 — 2017-06-26
- 1.1.2 — 2017-06-09
- 1.1.1 — 2017-05-12
- 1.1.0 — 2017-05-03
- 1.0.6 — 2017-05-03
- … 22 more at https://npm.io/package/react-qr-reader/versions

## README

# React QR Reader [![npm version](https://badge.fury.io/js/react-qr-reader.svg)](https://badge.fury.io/js/react-qr-reader) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![Known Vulnerabilities](https://snyk.io/test/github/react-qr-reader/react-qr-reader/badge.svg)](https://snyk.io/test/github/react-qr-reader/react-qr-reader)

:rocket: React QR Reader component. Check out the [demo](http://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 (
    <>
      <QrReader
        onResult={(result, error) => {
          if (!!result) {
            setData(result?.text);
          }

          if (!!error) {
            console.info(error);
          }
        }}
        style={{ width: '100%' }}
      />
      <p>{data}</p>
    </>
  );
};
```

## 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/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.

---
_Source: https://npm.io/package/react-qr-reader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._