reactjs-qr-code-reader

React QrCode Reader

Read QrCodes with the user's camera. Simple, customizable. Implements zxing-js/browser.

Check out the Storybook!

---

Table of Contents

1. Installation
2. Usage
3. Components Props
4. License

---

Installation

npm install react-qr-code-reader

Usage

Just import it and done!

import { QrReader } from 'react-qr-code-reader'

export function SomeComponent() {
  const [read, setRead] = useState(true);
	
  return (
    <QrReader read={read} />
  )
}

If a guide to the QrReader is needed, you can import QrReaderViewFinder and pass it to <QrReader /> children.

import { QrReader, QrReaderViewFinder } from 'react-qr-code-reader'

export function SomeComponent() {
  const [read, setRead] = useState(true);
	
  return (
    <QrReader read={read}>
      <QrReaderViewFinder />
    </QrReader>
  )
}

If you need a fully customized guide, you can pass any React node to it!

Components Props

QrReader

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!

QrReaderViewFinder

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

MediaTrackConstraints (Video Tracks)

Ref

Prop	Type
aspectRatio	number - fraction
facingMode	string - user | environment | left | right
frameRate	number - fp/s
height	number - px
width	number - px

Result

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().
getResultPoints	ResultPoint[]	QrCode's corners coordinates of the.
getBarcodeFormat	BarcodeFormat - 11/QR_CODE	Code of the barcode, in this case, 11.
getTimestamp	number - timestamp	When the QrCode was read.
toString	string

---

License

Licensed under the MIT License, Copyright © 2022-present WorkOS.

See LICENSE for more information.