Get Started

Install:

npm i react-qrcode-scanner

Usage:


                
        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>
          );
        }

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.
video	Object	{ width: '50%', height: '85%' }	Additional CSS styles for the video element.
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.