@alexpuertasr/react-qr-scanner NPM

Features

Scan Qr Codes using a smartphone camera or webcam.

Demo

Checkout the Demo.

Install

yarn add @yudiel/react-qr-scanner

npm install @yudiel/react-qr-scanner

Usage

import {QrScanner} from '@yudiel/react-qr-scanner';

const App = () => {
  return (
      <QrScanner
          onDecode={(result) => console.log(result)}
          onError={(error) => console.log(error?.message)}
      />
  );
}

Supported Formats

1D product	1D industrial	2D
UPC-A	Code 39	QR Code
EAN-8	Code 128	Data Matrix
EAN-13	RSS-14	Aztec
		PDF 417

Limitations

Due to browser implementations the camera can only be accessed over https or localhost.
Server side rendering won't work so only require the component when rendering in a browser environment.

API

Properties	Types	Default Value	Description
constraints	MediaTrackConstraints	`{ facingMode: 'environment' }`	Specify which camera should be used (if available).
containerStyle	`object`	none	Style object for the container element.
videoStyle	`object`	none	Style object for the video element.
scanDelay	`number`	`500`	The scan period for the QR hook.
videoId	`string`	`videoId`	The Id for the video element.
onResult	`function`	none	Scan event handler for result object.
onDecode	`function`	none	Scan event handler for decode value.
onError	`function`	none	Scan event handler for error object.
ViewFinder	`component`	none	ViewFinder component to rendering as overlay in the video element
hideCount	`boolean`	`true`	Hide the scanned count as overlay in the video element
stopDecoding	`boolean`	`false`	Stop the decoding process

@zxing/library

1.2.10

2 months ago