React component for scanning QR codes
npm install @rozoai/deeplink-reactA React component for scanning QR codes and parsing them with @rozoai/deeplink-core.
``bash`
pnpm add @rozoai/deeplink-react @rozoai/deeplink-core
`tsx
import { useState } from "react";
import { ScanQr } from "@rozoai/deeplink-react";
import { type DeeplinkData } from "@rozoai/deeplink-core";
function MyComponent() {
const [isScannerOpen, setScannerOpen] = useState(false);
const handleScanSuccess = (data: DeeplinkData) => {
console.log("Scanned data:", data);
setScannerOpen(false);
};
const handleScanError = (error: Error) => {
console.error("Scan error:", error);
setScannerOpen(false);
};
return (
Props
-
isOpen (boolean): Controls the visibility of the scanner modal.
- onClose (() => void): Callback function invoked when the scanner modal is requested to be closed.
- onScan ((data: DeeplinkData) => void): Callback function invoked when a QR code is successfully scanned and parsed.
- onError ((error: Error) => void): Callback function invoked when an error occurs during scanning or parsing.---
Related Packages
- @rozoai/deeplink-core: The core library for parsing deeplinks from various blockchain and payment protocols.
- Demo Application: A Next.js application demonstrating the usage of
@rozoai/deeplink-core and @rozoai/deeplink-react`.