https://github.com/ysuzuki19/react-qrcode-reader

QRCode Reader for modern React
https://github.com/ysuzuki19/react-qrcode-reader

Last synced: 2 days ago
JSON representation

QRCode Reader for modern React

• Host: GitHub
• URL: https://github.com/ysuzuki19/react-qrcode-reader
• Owner: ysuzuki19
• License: mit
• Created: 2021-10-15T14:49:12.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-11-07T16:44:01.000Z (about 2 months ago)
• Last Synced: 2024-12-17T19:03:09.564Z (10 days ago)
• Language: TypeScript
• Size: 3.5 MB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

```

# 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('');

  const handleRead = (code: QRCode) => {

    setVal(code.data);

  };

  return (

    <>

      

      
{val}

    >

  );

}

```


## 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('');

  return (

    <>

      

      
{val}

    >

  );

}

```


# API

`` 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`.