BarcodeScanner Component

Componente React para escanear códigos de barras y QR usando la cámara del dispositivo, basado en html5-qrcode y Material UI.

Dependencias

• React >= 17
• @mui/material >= 5
• @mui/icons-material
• html5-qrcode

Instala las dependencias necesarias:

npm install react @mui/material @mui/icons-material html5-qrcode
# o
yarn add react @mui/material @mui/icons-material html5-qrcode

Instalación

Copia el archivo BarcodeScanner.tsx a tu proyecto o instala el paquete si está publicado.

Uso Básico

import BarcodeScanner from './BarcodeScanner';

function App() {
  const handleDetected = (code: string) => {
    alert(`Código detectado: ${code}`);
  };

  return (
    <div>
      <BarcodeScanner onDetected={handleDetected} />
    </div>
  );
}

Props

| Prop | Tipo | Requerido | Descripción | Default | |----------------|------------------------|-----------|----------------------------------------------------------------------------------------------|-----------------| | onDetected | (code: string) => void | Sí | Callback que se ejecuta cuando se detecta un código. | — | | iconColor | string | No | Color del ícono del botón. | #fff | | icon | React.ReactNode | No | Ícono personalizado para el botón. | Cámara (MUI) | | modalColor | string | No | Color de fondo del modal. | #ffffff | | buttonColor | string | No | Color de fondo del botón. | #1976d2 | | buttonSx | object | No | Estilos adicionales para el botón (prop sx de MUI). | {} |

Ejemplo con opciones personalizadas

<BarcodeScanner
  onDetected={(code) => console.log('Detectado:', code)}
  iconColor="#222"
  icon={<CustomIcon />}
  modalColor="#f5f5f5"
  buttonColor="#ff9800"
  buttonSx={{ boxShadow: 3 }}
/>

Características

• Selección de cámara si hay más de una disponible (frontal/trasera).
• Modal personalizable con Material UI.
• Escaneo rápido y eficiente de códigos de barras y QR.
• Manejo de errores y permisos de cámara.
• Fácil integración y personalización.

Notas

• El componente solicita permisos de cámara al abrir el modal.
• Si el usuario deniega el permiso o no hay cámaras disponibles, se muestra un mensaje de error.
• El escaneo se detiene automáticamente al cerrar el modal o al detectar un código.

Créditos

• Basado en html5-qrcode.
• UI con Material UI.