# reactjs-qr-code-reader

> A qr code reader react component

Latest version **1.0.3** (published 2024-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-qr-code-reader
pnpm add reactjs-qr-code-reader
yarn add reactjs-qr-code-reader
bun add reactjs-qr-code-reader
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2024-01-30 |
| First published | 2024-01-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Juan Garcia |
| Maintainers | jamdev0 |
| Keywords | react, qrcode, qr code, qrcode-reader, qrcode-scanner, qr code reader, qr code scanner |

## Links

- npm: https://www.npmjs.com/package/reactjs-qr-code-reader
- Repository: https://github.com/JamDev0/react-qr-code-reader
- Homepage: https://react-qr-code-reader.netlify.app/?path=/docs/qrreader-reader--docs
- Issues: https://github.com/JamDev0/react-qr-code-reader/issues
- npm.io page: https://npm.io/package/reactjs-qr-code-reader

## Dependencies (2)

- [@zxing/browser](https://npm.io/package/@zxing/browser.md) ^0.1.4
- [webrtc-adapter](https://npm.io/package/webrtc-adapter.md) ^8.2.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) — 2024-01-30
- 1.0.2 — 2024-01-28
- 1.0.1 — 2024-01-28
- 1.0.0 — 2024-01-28

## README

# React QrCode Reader

Read QrCodes with the user's camera. Simple, customizable. Implements [zxing-js/browser](https://github.com/zxing-js/browser).

[Check out the Storybook!](http://react-qr-code-reader.netlify.app/)

---

## Table of Contents

1. [Installation](#Installation)
2. [Usage](#Usage)
3.  [Components Props](<#Components Props>)
4. [License](#License)

---

## Installation

```shell
npm install react-qr-code-reader
```

## Usage

### Just import it and done!

```TSX
import { QrReader } from 'react-qr-code-reader'

export function SomeComponent() {
  const [read, setRead] = useState(true);
	
  return (
    <QrReader read={read} />
  )
}
```

If a guide to the QrReader is needed, you can import `QrReaderViewFinder` and pass it to `<QrReader />` children.

```TSX
import { QrReader, QrReaderViewFinder } from 'react-qr-code-reader'

export function SomeComponent() {
  const [read, setRead] = useState(true);
	
  return (
    <QrReader read={read}>
      <QrReaderViewFinder />
    </QrReader>
  )
}
```

If you need a fully customized guide, you can pass any React node to it!

## Components Props

### QrReader

| Prop | Type | Optional | Default | Description |
| ---- | ---- | ---- | ---- | ---- |
| read | `boolean` | ❌ | - | If the reader should read. |
| videoConstrains | [[#MediaTrackConstraints (Video Tracks)]] | ✅ | { facingMode: 'environment', frameRate: 30 } |  |
| scanDelay | `number` - ms | ✅ | 300 | The delay between each reading. |
| scanSuccessDelay | `number` - ms | ✅ | 3500 | The delay to continue the reading process after a successful reading. |
| onReadError | `(err: string) => void` | ✅ | - | Function called when there is an error in the reading process. |
| onRead | `(result: `[Result](#Result)`) => void` | ✅ | - | Function called when the QrCode is read. |
| flipVideo | `boolean` | ✅ | false | If the previewed video should be flipped. |

**It extends HTML's div attributes!**

### QrReaderViewFinder

| Prop | Type | Optional | Default | Description |
| ---- | ---- | ---- | ---- | ---- |
| color | string | ✅ | `rgb(239 68 68)` - red | The guide's scanning corners color. |

**It extends HTML's svg attributes!**

## Types

### MediaTrackConstraints (Video Tracks)

[Ref](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#instance_properties_of_video_tracks)

| Prop | Type |
| ---- | ---- |
| aspectRatio | number - fraction |
| facingMode | string - user \| environment \| left \| right |
| frameRate | number - fp/s |
| height | number - px |
| width | number - px |

### Result

[Ref](https://github.com/zxing-js/library/blob/99a8e0c65de7bf97565a5dd46299d858c10dd69a/src/core/Result.ts#L73)

| Method | Return | Description |
| ---- | ---- | ---- |
| getText | string | Text encoded on the QrCode. |
| getRawBytes | Uint8Array | Raw bits encondded on the QrCode. |
| getNumBits | number | Number of valid bits in the `Uint8Array` returned by `getRawBytes()`. |
| getResultPoints | ResultPoint[] | QrCode's corners coordinates of the. |
| getBarcodeFormat | BarcodeFormat - 11/QR_CODE | Code of the barcode, in this case, 11. |
| getTimestamp | number - timestamp | When the QrCode was read. |
| toString | string |  |

---

## License

Licensed under the MIT License, Copyright © 2022-present [WorkOS](https://workos.com).

See [LICENSE](./LICENSE) for more information.

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