Introduce useQRScanner

src/hooks/useQRScanner.ts

@@ -0,0 +1,66 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { is_fully } from '../utils/is_fully';
+
+type QRScanFunction = (code: string) => void;
+
+type QRScanConfig = {
+    onScan?: QRScanFunction;
+    onCancel?: () => void;
+};
+
+export const useQRScanner = (config?: QRScanConfig) => {
+    if (!is_fully()) return { scannedQR: undefined, startScanning: () => {} };
+
+    const [scannedQR, setScannedQR] = useState<string | undefined>();
+
+    const vId = useMemo(() => Math.random().toString(36).slice(2, 11), []);
+
+    useEffect(() => {
+        window._fullykiosk[vId] = (state: 'scan' | 'cancel', code?: string) => {
+            if (state === 'scan' && !!code) {
+                config?.onScan?.(code);
+
+                setScannedQR(code);
+            }
+
+            if (state === 'cancel') {
+                config?.onCancel?.();
+            }
+        };
+
+        // Register events
+        fully.bind(
+            'onQrScanSuccess',
+            `_fullykiosk['${vId}']('scan', '$code');`
+        );
+        fully.bind('onQrScanCancelled', `_fullykiosk['${vId}']('cancel');`);
+
+        return () => {
+            // Unregister events
+            window._fullykiosk[vId] = undefined;
+        };
+    }, [0]);
+
+    return {
+        scannedQR,
+        startScanning: (
+            prompt: string,
+            resultUrl: string,
+            cameraId: number = -1,
+            timeout: number = -1,
+            beepEnabled: boolean = true,
+            showCancelButton: boolean = true,
+            useFlashlight: boolean = false
+        ) =>
+            fully.scanQrCode(
+                prompt,
+                resultUrl,
+                cameraId,
+                timeout,
+                beepEnabled,
+                showCancelButton,
+                useFlashlight
+            ),
+    };
+};

src/hooks/useWifi.ts

@@ -1,8 +1,12 @@
 import { useEffect, useMemo } from 'react';
 
+import { is_fully } from '../utils/is_fully';
+
 window._fullykiosk = window._fullykiosk || {};
 
 export const useWifi = () => {
+    if (!is_fully()) return { wifiEnabled: undefined, enableWifi: () => {} };
+
     const wifiEnabled = fully.isWifiEnabled();
     const wifiConnected = fully.isWifiConnected();
     const networkConnected = fully.isNetworkConnected();

src/index.ts

@@ -14,6 +14,7 @@ export * from './hooks/useIpv6Address';
 export * from './hooks/useKeyboard';
 export * from './hooks/useMacAddress';
 export * from './hooks/useOrientation';
+export * from './hooks/useQRScanner';
 export * from './hooks/useScreenBrightness';
 export * from './hooks/useScreenSleep';
 export * from './hooks/useSerialNumber';

test/App.tsx

@@ -16,6 +16,7 @@ import {
     useKeyboard,
     useMacAddress,
     useOrientation,
+    useQRScanner,
     useScreenBrightness,
     useScreenSleep,
     useSerialNumber,
@@ -67,6 +68,11 @@ export const App: FC = () => {
         wifiConnected,
         wifiEnabled,
     } = useWifi();
+    const { scannedQR, startScanning } = useQRScanner({
+        onScan: (data) => {
+            alert(`Scanned QR: ${data}`);
+        },
+    });
 
     return (
         <div>
@@ -140,6 +146,12 @@ export const App: FC = () => {
                 <button onClick={openWifiSettings}>Settings</button>
                 <button onClick={enableWifi}>Enable</button>
             </p>
+            <p>
+                <div>QRCode: {scannedQR}</div>
+                <button onClick={() => startScanning('Scan plz', 'd')}>
+                    Start Scanning
+                </button>
+            </p>
         </div>
     );
 };