shell-validator

Shell Validator

Descripción

Una librería React para validar y procesar imágenes con OCR, pensada para aplicaciones que necesitan subir comprobantes o facturas de tipo shell y extraer texto automáticamente.

Instalación

npm install shell-validator

📦 Uso Rápido

Un componente especializado para la carga y validación de facturas, con soporte para OCR (Reconocimiento Óptico de Caracteres).

import { FileUploader } from 'shell-validator';
import 'shell-validator/src/styles/FileUploader.css'; /* importar estilos */

function App() {
  return <FileUploader />;
}

🛠️ Hooks

1. useFileValidation

Maneja la validación de archivos.

import { useFileValidation } from 'shell-validator';

function MiComponente() {
  const { file, preview, errors, handleFile } = useFileValidation();

  return (
    <div>
      <input 
        type="file" 
        onChange={(e) => handleFile(e.target.files)} 
      />
      {preview && <img src={preview} alt="Preview" />}
      {errors.length > 0 && (
        <div>
          {errors.map((error, index) => (
            <p key={index}>{error}</p>
          ))}
        </div>
      )}
    </div>
  );
}

2. useImageValidation

Maneja la validación de imágenes y OCR.

import { useImageValidation } from 'shell-validator';

function MiComponente() {
  const { validateImageFile, extractedText, error } = useImageValidation();

  const procesarImagen = async (file) => {
    const esValida = await validateImageFile(file);
    if (esValida) {
      console.log('Texto extraído:', extractedText);
    }
  };

  return (
    <div>
      <input 
        type="file" 
        onChange={(e) => procesarImagen(e.target.files[0])} 
      />
      {extractedText && (
        <div>
          <h3>Texto extraído:</h3>
          <pre>{extractedText}</pre>
        </div>
      )}
    </div>
  );
}

⚙️ Configuración

// Configuración por defecto
const config = {
  maxSizeInMB: 1,
  allowedTypes: ['image/jpeg', 'image/png'],
  allowedExtensions: ['.jpg', '.png', '.jpeg'],
  maxFiles: 1,
  errorMessages: {
        size: 'El archivo excede el tamaño máximo permitido de' MB',
        type: 'Solo se permiten archivos JPG, PNG y JPEG',
        maxFiles: 'Solo se permite subir un archivo a la vez'
    }
};

🔍 Características

• ✅ Validación de archivos
• ✅ Previsualización de imágenes
• ✅ OCR (Reconocimiento de texto)
• ✅ Manejo de errores
• ✅ Estilos incluidos

📋 Requisitos

• React 19 o superior
• Node.js 20 o superior