title: 20230924-QR-Code date: 2023-09-25 tags:
- frontend
<QRCode
size={256}
style={{ height: "auto", maxWidth: "100%", width: "100%" }}
value={JSON.stringify(url)}
viewBox={`0 0 256 256`}
/>
@/components/Html5QrcodePlugin
import { Html5QrcodeScanner } from 'html5-qrcode';
import { useEffect } from 'react';
const qrcodeRegionId = "html5qr-code-full-region";
// Creates the configuration object for Html5QrcodeScanner.
const createConfig = (props) => {
let config = {};
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;
}
return config;
};
const Html5QrcodePlugin = (props) => {
useEffect(() => {
// when component mounts
const config = createConfig(props);
const verbose = props.verbose === true;
// Suceess callback is required.
if (!(props.qrCodeSuccessCallback)) {
throw "qrCodeSuccessCallback is required callback.";
}
const html5QrcodeScanner = new Html5QrcodeScanner(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 (
<div id={qrcodeRegionId} />
);
};
export default Html5QrcodePlugin;
import Html5QrcodePlugin from "@/components/Html5QrcodePlugin"
<Html5QrcodePlugin
fps={10}
qrbox={256}
disableFlip={false}
qrCodeSuccessCallback={(_results: string) => onScanSuccess(_results)}
/>