web-mrz-reader-react

React wrapper for web-mrz-reader — MRZ OCR component for React apps.

Install

npm install web-mrz-reader-react web-mrz-reader tesseract.js

Copy Static Assets

mkdir -p public/model public/tesseract
cp node_modules/web-mrz-reader/public/model/mrz.traineddata.gz public/model/
cp node_modules/web-mrz-reader/public/tesseract/* public/tesseract/

Usage

import { useRef } from 'react';
import { MRZReader, type MRZReaderHandle } from 'web-mrz-reader-react';

function App() {
  const readerRef = useRef<MRZReaderHandle>(null);

  return (
    <>
      <MRZReader
        ref={readerRef}
        workerPath="/tesseract/worker.min.js"
        corePath="/tesseract/"
        langPath="/model/"
        onResult={(result) => {
          console.log('MRZ text:', result.raw);
          console.log('Parsed data:', result.parsed);
        }}
        onError={(error) => console.error(error)}
      />
      <button onClick={() => readerRef.current?.capture()}>
        Capture & Read MRZ
      </button>
    </>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | ref | Ref<MRZReaderHandle> | — | Imperative handle for capture, reset, stop | | workerPath | string | /tesseract/worker.min.js | Path to Tesseract worker | | corePath | string | /tesseract/ | Path to Tesseract WASM cores | | langPath | string | /model/ | Path to MRZ trained model | | onResult | (result) => void | — | Called when MRZ is detected | | onError | (error: string) => void | — | Called on camera or OCR errors | | autoStart | boolean | true | Start camera on mount | | className | string | — | CSS class on container | | style | CSSProperties | — | Inline styles on container |

Imperative Handle

const ref = useRef<MRZReaderHandle>(null);

ref.current?.capture();  // capture frame and run OCR
ref.current?.reset();    // clear canvas
ref.current?.stop();     // stop camera stream

Standalone Parsing

Re-exported from web-mrz-reader:

import { isMRZ, extractMRZData, parseMrz } from 'web-mrz-reader-react';

const parsed = parseMrz('P<GBRNEGUS<<JOHN...');

Local Development

npm install
npm run dev

Build

npm run build