react-pdf-image-qr-scanner

react-pdf-image-qr-scanner

This is a component to scan user uploaded PDF's and Images for QR-Codes

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);
			// It returns null if no QR code is found
			setResultText(qrCode || "No QR code found");
		} catch (e) {
			// Example Error Handling
			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