QR lector

src/components/modal.tsx

@@ -74,7 +74,7 @@ export default function Modal({
       aria-hidden="true"
     >
       <div
-        className={`modal-dialog modal-dialog-centered ${className?.dialog ?? ''} ${modalSizeClass}`}
+        className={`modal-dialog modal-dialog-centered ${className?.dialog} ${modalSizeClass}`}
       >
         <div className={`modal-content ${className?.content}`}>
           {closeButton && (

src/components/qr-scanner.tsx

@@ -1,41 +1,70 @@
-// components/QrScanner.tsx
-'use client';
+// file: Html5QrcodePlugin.tsx
+"use client";
 
-import { useEffect } from 'react';
-import { Html5Qrcode } from 'html5-qrcode';
+import { Html5QrcodeScanner, Html5QrcodeCameraScanConfig } from "html5-qrcode";
+import { useEffect } from "react";
 
-interface Props {
-  onScan: (text: string) => void;
+const qrcodeRegionId = "html5qr-code-full-region";
+
+interface Html5QrcodePluginProps extends Partial<Html5QrcodeCameraScanConfig> {
+  verbose?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  qrCodeSuccessCallback: (decodedText: string, decodedResult: any) => void;
+  qrCodeErrorCallback?: (errorMessage: string) => void;
 }
 
-export default function QrScanner({ onScan }: Props) {
-  useEffect(() => {
-    const scanner = new Html5Qrcode('qr-reader');
+const createConfig = (
+  props: Html5QrcodePluginProps
+): Html5QrcodeCameraScanConfig => {
+  const config: Html5QrcodeCameraScanConfig = { fps: 10 }; // Default fps value set to 10
 
-    scanner
-      .start(
-        { facingMode: 'environment' },
-        { fps: 10, qrbox: 250 },
-        (decodedText) => {
-          onScan(decodedText);
-          scanner.stop().then(() => scanner.clear());
-        },
-        (error) => {
-          // puedes ignorar errores de escaneo frecuentes
-          console.error('Error de escaneo:', error);
-        }
-      )
-      .catch((err) => console.error('Error al iniciar el lector QR:', err));
+  if (props.fps !== undefined) {
+    config.fps = props.fps;
+  }
+  if (props.qrbox !== undefined) {
+    config.qrbox = props.qrbox;
+  }
+  if (props.aspectRatio !== undefined) {
+    config.aspectRatio = props.aspectRatio;
+  }
+  if (props.disableFlip !== undefined) {
+    config.disableFlip = props.disableFlip;
+  }
+
+  return config;
+};
+
+const Html5QrcodePlugin: React.FC<Html5QrcodePluginProps> = (props) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    // Previene ejecución en SSR
+    if (typeof window === "undefined") return;
+
+    const config = createConfig(props);
+    const verbose = props.verbose === true;
+
+    if (!props.qrCodeSuccessCallback) {
+      throw new Error("qrCodeSuccessCallback is required.");
+    }
+
+    const html5QrcodeScanner = new Html5QrcodeScanner(
+      qrcodeRegionId,
+      config,
+      verbose
+    );
+    html5QrcodeScanner.render(
+      props.qrCodeSuccessCallback,
+      props.qrCodeErrorCallback
+    );
 
     return () => {
-      scanner.stop().then(() => scanner.clear());
+      html5QrcodeScanner.clear().catch((error) => {
+        console.error("Failed to clear html5QrcodeScanner: ", error);
+      });
     };
-  }, [onScan]);
+  }, []);
 
-  return (
-    <div
-      id='qr-reader'
-      style={{ width: '100%', maxWidth: 400, margin: '0 auto' }}
-    />
-  );
-}
+  return <div id={qrcodeRegionId} />;
+};
+
+export default Html5QrcodePlugin;