# react-qrcode-reader

> [![npm version](https://badge.fury.io/js/react-qrcode-reader.svg)](https://badge.fury.io/js/react-qrcode-reader)

Latest version **3.1.0** (published 2026-10-17) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2026-10-17 |
| First published | 2021-10-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=24 |
| Dependencies | 2 |
| Unpacked size | 433.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | ysuzuki19 |
| Maintainers | ysuzuki19 |
| Keywords | react, qrcode, component, camera, typescript |

## Links

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

## Dependencies (2)

- [jsqr](https://npm.io/package/jsqr.md) ^1.4.0
- [react-webcam](https://npm.io/package/react-webcam.md) ^7.0.1

## 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.1.0 (latest) — 2026-10-17
- 3.0.3 — 2026-08-05
- 3.0.2 — 2025-12-05
- 3.0.1 — 2025-09-20
- 3.0.0 — 2025-06-06
- 2.3.17 — 2025-06-06
- 2.3.16 — 2025-03-08
- 2.3.15 — 2024-11-07
- 2.3.14 — 2024-06-16
- 2.3.13 — 2024-03-31
- 2.3.12 — 2024-01-16
- 2.3.11 — 2023-10-01
- 2.3.10 — 2023-09-19
- 2.3.9 — 2023-09-09
- 2.3.8 — 2023-09-08
- … 22 more at https://npm.io/package/react-qrcode-reader/versions

## README

# react-qrcode-reader

[![npm version](https://badge.fury.io/js/react-qrcode-reader.svg)](https://badge.fury.io/js/react-qrcode-reader)

QRCode Reader for modern React

# install

```bash
$ npm i react-qrcode-reader
```

# package and React version compatibility

| react-qrcode-reader version | React version |
| --------------------------- | ------------- |
| 3.1.x                       | 19.x, 18.x    |
| 3.0.x                       | 19.x          |
| 2.x.x                       | 18.x, 17.x    |

Please ensure your React version matches the supported version of the package.

Since 3.1.0 the package no longer ships `@types/react` as a runtime dependency, so its
types resolve against the `@types/react` in your own project.

# how to use

## 1. with onRead

```tsx
import React from 'react';

import QrCodeReader, { QRCode } from 'react-qrcode-reader';

export function App() {
  const [val, setVal] = React.useState<string>('');

  const handleRead = (code: QRCode) => {
    setVal(code.data);
  };

  return (
    <>
      <QrCodeReader delay={100} width={500} height={500} onRead={handleRead} />
      <p>{val}</p>
    </>
  );
}
```

## 2. with setter for hook

```tsx
import React from 'react';

import QrCodeReader, { QRCode } from 'react-qrcode-reader';

export function App() {
  const [val, setVal] = React.useState<string>('');

  return (
    <>
      <QrCodeReader delay={100} width={600} height={500} action={setVal} />
      <p>{val}</p>
    </>
  );
}
```

# API

`<QrCodeReader>` has 3 required props and 3 optional props.

| prop             | type             | instruction                             | default |
| ---------------- | ---------------- | --------------------------------------- | ------- |
| delay            | number           | delay of recapture                      |         |
| width            | number           | width of image                          |         |
| height           | number           | height of image                         |         |
| onRead           | (QRCode) => void | callback on read qrcode                 | none    |
| action           | (string) => void | action on read qrcode                   | none    |
| videoConstraints | object           | MediaStreamConstraints(s) for the video | none    |

argument of `onRead` is `QRCode` data. `QRCode` is interface in `jsQR`.

argument of `action` is the string included in QRCode. You can simply get value of QRCode by this.

argument of `videoConstraints` is the object included in Webcam. We can build a constraints object by passing it to the videoConstraints prop. Please take a look at the MDN docs to get an understanding how this works:
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

# Version Up

Read [doc](./MIGRATION.md) for update `1` to `2`.

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