react-pdf-image-qr-scanner
This is a component to scan user uploaded PDF's and Images for QR-Codes
![NPM](https://img.shields.io/npm/v/react-pdf-image-qr-scanner.svg?style=flat-square)
Demo
There is a demo available here. The source of the demo is in the /example
folder.
Install
yarn add react-pdf-image-qr-scanner
npm install --save react-pdf-image-qr-scanner
Usage
import React from 'react';
import ScanCanvasQR from 'react-pdf-image-qr-scanner';
function App() {
const canvasScannerRef = useRef();
const [resultText, setResultText] = useState("");
async function scanFile(selectedFile) {
setResultText("");
try {
const qrCode = await canvasScannerRef.current.scanFile(selectedFile);
setResultText(qrCode || "No QR code found");
} catch (e) {
if (e?.name === "InvalidPDFException") {
setResultText("Invalid PDF");
} else if (e instanceof Event) {
setResultText("Invalid Image");
} else {
console.log(e);
setResultText("Unknown error");
}
}
}
return (
<div>
<ScanCanvasQR ref={canvasScannerRef} />
<input type="file" onChange={(e) => { scanFile(e.target.files[0]); }} />
</div>
);
}
Supported By