# @stevent-team/react-qr-hunter

> A QR code scanner for React

Latest version **0.0.4** (published 2023-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @stevent-team/react-qr-hunter
pnpm add @stevent-team/react-qr-hunter
yarn add @stevent-team/react-qr-hunter
bun add @stevent-team/react-qr-hunter
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2023-10-10 |
| First published | 2022-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 127.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Stevent Team |
| Maintainers | giraugh, benjibenji |
| Keywords | qr, scanner, reader, react, webworker, BarcodeDetector |

## Links

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

## Dependencies (1)

- [qr-scanner](https://npm.io/package/qr-scanner.md) ^1.4.2

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

- 0.0.4 (latest) — 2023-10-10
- 0.0.3 — 2023-03-26
- 0.0.2 — 2022-07-07
- 0.0.1 — 2022-07-07

## README

# 🏹 React QR Hunter
[![npm version](https://img.shields.io/npm/v/@stevent-team/react-qr-hunter)](https://www.npmjs.com/package/@stevent-team/react-qr-hunter)
[![minzip size](https://img.shields.io/bundlephobia/minzip/@stevent-team/react-qr-hunter)](https://bundlephobia.com/package/@stevent-team/react-qr-hunter)

Simple and fast QR code scanner for React, based on the JavaScript library [qr-scanner](https://github.com/nimiq/qr-scanner).

Runs in a web worker to improve performance on slower devices.

## Usage

Install the package

```bash
yarn add @stevent-team/react-qr-hunter
```

And use it

```jsx
import { createRoot } from 'react-dom/client'
import QrHunter from '@stevent-team/react-qr-hunter'

createRoot(document.getElementById('app')).render(
  <QrHunter
    onScan={result => console.log(result.data)}
    options={{
      highlightScanRegion: true,
      highlightCodeOutline: true,
    }}
  />
)
```

## Options

The `QrHunter` component accepts 3 properties, `onScan`, `onError`, and `options`. The first two are functions that are called every frame. If no QR code is detected, the `onError` function will fire. By default it won't do anything. If a QR code is detected, the data and corner positions will be passed to the `onScan` function.

The `options` prop is an object that supports the following options:

| Option | Type | Default | Description |
| --- | --- | --- | --- |
| `preferredCamera` | string | `environment` | Can be a device ID or a facing mode (`environment` or `user`) |
| `maxScansPerSecond` | number | `25` | This is capped by the camera's frame rate. You can change this to reduce battery consumption if you don't need as many scans. |
| `calculateScanRegion` | function | None | A function that is passed the `video` element, and should return an object with `x`, `y`, `width`, and `height`. This defines the region of the video that is processed, and can be reduced in size to improve performance. By default, the scan region is restricted to a centered square of two thirds of the video width or height, whichever is smaller, and scaled down to a 400x400 square. Optionally you can also provide `downScaledWidth` and `downScaledHeight` in the return object to scale down the input before processing to improve performance. Note that these must be the same aspect ratio as `width` and `height`. |
| `highlightScanRegion` | boolean | `false` | Renders a box around the scan region. Can be styled by selecting the `scan-region-highlight` css class, and the `scan-region-highlight-svg` class for the svg box inside. |
| `highlightCodeOutline` | boolean | `false` | Renders an svg polygon where it detects a QR code. Can be styled by selecting the `code-outline-highlight` css class. |

## Contributing

You can install dependencies by running `yarn` after cloning this repo, and `yarn dev` to start the demo.

This library uses [changesets](https://github.com/changesets/changesets), if the changes you've made would constitute a version bump, run `yarn changeset` and follow the prompts to document the changes you've made. Changesets are consumed on releases, and used to generate a changelog and bump version number.

## License

Created by Stevent and licensed under MIT

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