react-qrcode-reader v2.3.13
react-qrcode-reader
QRCode Reader for modern React
install
$ npm i react-qrcode-reader
how to use
1. with onRead
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
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 for update 1
to 2
.
1 month ago
4 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
8 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago