@hoseinh/react-ocr

React components and a hook to perform OCR on images and handwriting using Tesseract.js, Groq Vision, or a custom OCR handler.

Demo: react-ocr-demo.hoseinh.com

Installation

Install from npm:

npm install @hoseinh/react-ocr
# or
yarn add @hoseinh/react-ocr

Note: React and ReactDOM are peer dependencies - ensure your project already depends on React.

Quick Start

import React from "react";
import { CanvasInput, ImageInput } from "@hoseinh/react-ocr";
import "@hoseinh/react-ocr/dist/react-ocr.css";

export default function App() {
  return (
    <div>
      <CanvasInput onDetect={(t) => console.log("canvas:", t)} />
      <ImageInput onDetect={(t) => console.log("image:", t)} />
    </div>
  );
}

Note: Import the CSS file to use the minimal default styles. You can omit this import if you prefer to style the components yourself.

Using the useOCR Hook for Custom Implementations

For custom UI implementation use useOCR hook directly:

import React from "react";
import { useOCR } from "@hoseinh/react-ocr";
import "@hoseinh/react-ocr/dist/react-ocr.css";

export default function CustomOCRComponent() {
  const { performOCR, isOCRPending, detectedText, error } = useOCR({
    ocrService: "tesseract",
  });

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      await performOCR(file);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileUpload} />
      {isOCRPending && <p>Processing...</p>}
      {error && <p style={{ color: "red" }}>Error: {error.message}</p>}
      {detectedText && <p><strong>Result:</strong> {detectedText}</p>}
    </div>
  );
}

OCR Backends

• Tesseract.js - on-device browser OCR (default)
• Groq Vision - cloud-based LLM vision
• Custom - provide a customOCRHandler to integrate any backend

See detailed examples in docs/ (imageInput.md, canvasInput.md, useOCR.md).

Documentation

• API Reference
• ImageInput Usage
• CanvasInput Usage
• useOCR Hook
• SSR considerations

For information about publishing and build artifacts see package.json and vite.config.ts.