A qr code reader react component
npm install reactjs-qr-code-readershell
npm install react-qr-code-reader
`
Usage
$3
`TSX
import { QrReader } from 'react-qr-code-reader'
export function SomeComponent() {
const [read, setRead] = useState(true);
return (
)
}
`
If a guide to the QrReader is needed, you can import QrReaderViewFinder and pass it to children.
`TSX
import { QrReader, QrReaderViewFinder } from 'react-qr-code-reader'
export function SomeComponent() {
const [read, setRead] = useState(true);
return (
)
}
`
If you need a fully customized guide, you can pass any React node to it!
Components Props
$3
| 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) => void | ✅ | - | Function called when the QrCode is read. |
| flipVideo | boolean | ✅ | false | If the previewed video should be flipped. |
It extends HTML's div attributes!
$3
| 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
$3
Ref
| Prop | Type |
| ---- | ---- |
| aspectRatio | number - fraction |
| facingMode | string - user \| environment \| left \| right |
| frameRate | number - fp/s |
| height | number - px |
| width | number - px |
$3
Ref
| 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()`. |