import{Html5QrcodeScanner}from'html5-qrcode';import{useEffect}from'react';constqrcodeRegionId="html5qr-code-full-region";// Creates the configuration object for Html5QrcodeScanner.
constcreateConfig=(props)=>{letconfig={};if(props.fps){config.fps=props.fps;}if(props.qrbox){config.qrbox=props.qrbox;}if(props.aspectRatio){config.aspectRatio=props.aspectRatio;}if(props.disableFlip!==undefined){config.disableFlip=props.disableFlip;}returnconfig;};constHtml5QrcodePlugin=(props)=>{useEffect(()=>{// when component mounts
constconfig=createConfig(props);constverbose=props.verbose===true;// Suceess callback is required.
if(!(props.qrCodeSuccessCallback)){throw"qrCodeSuccessCallback is required callback.";}consthtml5QrcodeScanner=newHtml5QrcodeScanner(qrcodeRegionId,config,verbose);html5QrcodeScanner.render(props.qrCodeSuccessCallback,props.qrCodeErrorCallback);// cleanup function when component will unmount
return()=>{html5QrcodeScanner.clear().catch(error=>{console.error("Failed to clear html5QrcodeScanner. ",error);});};},[]);return(<divid={qrcodeRegionId}/>);};exportdefaultHtml5QrcodePlugin;