midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add react qr

This commit is contained in:
rizky 2024-09-12 00:49:27 -07:00
parent dd8ea2e1ec
commit 2ec7a7c245
2 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
comps/custom/QrReader.tsx
View File

@ -2,77 +2,75 @@ import { useEffect, useRef, useState } from "react";
import QrScanner from "qr-scanner"; import QrScanner from "qr-scanner";
export const QrReader = () => { export const QrReader = () => {
const scanner = useRef<QrScanner>(); const scanner = useRef<QrScanner>();
const videoEl = useRef<HTMLVideoElement>(null); const videoEl = useRef<HTMLVideoElement>(null);
const qrBoxEl = useRef<HTMLDivElement>(null); const qrBoxEl = useRef<HTMLDivElement>(null);
const [qrOn, setQrOn] = useState<boolean>(true); const [qrOn, setQrOn] = useState<boolean>(true);
const [scannedResult, setScannedResult] = useState<string | undefined>(""); const [scannedResult, setScannedResult] = useState<string | undefined>("");
// Success // Success
const onScanSuccess = (result: QrScanner.ScanResult) => { const onScanSuccess = (result: QrScanner.ScanResult) => {
console.log(result); console.log(result);
setScannedResult(result?.data); setScannedResult(result?.data);
};
// Fail
const onScanFail = (err: string | Error) => {
console.log(err);
};
useEffect(() => {
if (videoEl?.current && !scanner.current) {
scanner.current = new QrScanner(videoEl?.current, onScanSuccess, {
onDecodeError: onScanFail,
preferredCamera: "environment",
highlightScanRegion: true,
highlightCodeOutline: true,
overlay: qrBoxEl?.current || undefined,
});
scanner?.current
?.start()
.then(() => setQrOn(true))
.catch((err) => {
if (err) setQrOn(false);
});
}
return () => {
if (!videoEl?.current) {
scanner?.current?.stop();
}
}; };
}, []);
// Fail useEffect(() => {
const onScanFail = (err: string | Error) => { if (!qrOn)
console.log(err); alert(
}; "Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
);
}, [qrOn]);
useEffect(() => { return (
if (videoEl?.current && !scanner.current) { <div className="qr-reader">
scanner.current = new QrScanner(videoEl?.current, onScanSuccess, { {/* QR */}
onDecodeError: onScanFail, <video ref={videoEl}></video>
preferredCamera: "environment", <div ref={qrBoxEl} className="qr-box"></div>
highlightScanRegion: true,
highlightCodeOutline: true,
overlay: qrBoxEl?.current || undefined,
});
scanner?.current {/* Show Data Result if scan is success */}
?.start() {scannedResult && (
.then(() => setQrOn(true)) <p
.catch((err) => { style={{
if (err) setQrOn(false); position: "absolute",
}); top: 0,
} left: 0,
zIndex: 99999,
return () => { color: "white",
if (!videoEl?.current) { }}
scanner?.current?.stop(); >
} Scanned Result: {scannedResult}
}; </p>
}, []); )}
</div>
useEffect(() => { );
if (!qrOn)
alert(
"Camera is blocked or not accessible. Please allow camera in your browser permissions and Reload."
);
}, [qrOn]);
return (
<div className="qr-reader">
{/* QR */}
<video ref={videoEl}></video>
<div ref={qrBoxEl} className="qr-box">
</div>
{/* Show Data Result if scan is success */}
{scannedResult && (
<p
style={{
position: "absolute",
top: 0,
left: 0,
zIndex: 99999,
color: "white",
}}
>
Scanned Result: {scannedResult}
</p>
)}
</div>
);
}; };

2
modules.json
View File

@ -16,6 +16,8 @@
"@radix-ui/react-slider": "^1.1.2", "@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.1.0", "@radix-ui/react-switch": "^1.1.0",
"react-qr-code": "^2.0.15",
"qr-scanner": "^1.4.2",
"@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-tabs": "^1.0.4",
"@types/autosize": "^4.0.3", "@types/autosize": "^4.0.3",
"@types/lodash.capitalize": "^4.2.9", "@types/lodash.capitalize": "^4.2.9",