React-qrcode-scanner NPM

Introduction

A React component that provides a simple and efficient way to read QR codes from a web or mobile camera. This lightweight component utilizes HTML canvas to capture images and leverages the jsQR library to detect QR codes within the image data. NOTE: HTTPS is required to use camera on mobile devices. However, you can test over localhost on your computer

DEMO

Install

npm i react-qrcode-scanner

Example

import React from 'react';
import { QrScanner } from 'react-qrcode-scanner';

function App() {
  const handleScan = (value) => {
    console.log({ value });
  };

  const handleError = (error) => {
    console.log({ error });
  };

  return (
    <div className='App'>
      <QrScanner onScan={handleScan} onError={handleError} />
    </div>
  );
}

export default App;

Props

Prop Name	Type	Default Value	Description
onError	Function	(error) => console.log({error})	Callback function that is called when an error occurs during scanning.
onScan	Function	(value) => console.log({value})	Callback function that is called when a QR code is successfully scanned.
facingMode	String	'environment'	The facing mode of the camera. Can be set to 'environment' or 'face'.
constraints	Object	null	The device constraints for the camera.
onLoad	Function	(val: {mirrorVideo, streamLabel}) => null	Callback function that is called when the component is loaded.
flipHorizontally	Boolean	false	Determines whether the video output should be flipped or reflected based on the facing mode.
style	Object	null	Additional styling for the section.
className	String	null	Additional class names for the section wrapper.
delay	Number	800	The delay between each scan attempt in milliseconds.
resolution	Number	600	The resolution of the canvas in pixels.
aspectRatio	string	'16:9'	Aspect ratio of the video frame. Default is landscape. Change to '3:4' for portrait
showViewFinder	Boolean	true	Determines whether to show the viewfinder.
viewFinder	Object	{ border: '12px solid rgba(255,255,255,0.3)', position: 'absolute', borderRadius: '5px', width: '250px', height: '250px' }	Additional CSS styles for the viewfinder element.