web-mrz-reader-react 1.0.0

package/README.md

@@ -0,0 +1,94 @@
+# web-mrz-reader-react
+
+React wrapper for [web-mrz-reader](https://www.npmjs.com/package/web-mrz-reader) — MRZ OCR component for React apps.
+
+## Install
+
+```bash
+npm install web-mrz-reader-react web-mrz-reader tesseract.js
+```
+
+## Copy Static Assets
+
+```bash
+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
+
+```tsx
+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
+
+```tsx
+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`:
+
+```tsx
+import { isMRZ, extractMRZData, parseMrz } from 'web-mrz-reader-react';
+
+const parsed = parseMrz('P<GBRNEGUS<<JOHN...');
+```
+
+## Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build
+```

package/dist/MRZReader.d.ts

@@ -0,0 +1,14 @@
+import { type MRZReaderOptions } from 'web-mrz-reader';
+export interface MRZReaderProps extends Omit<MRZReaderOptions, 'container' | 'onResult'> {
+    className?: string;
+    style?: React.CSSProperties;
+    onResult?: (result: NonNullable<ReturnType<typeof import('web-mrz-reader').extractMRZData>>) => void;
+    onError?: (error: string) => void;
+    autoStart?: boolean;
+}
+export interface MRZReaderHandle {
+    capture: () => void;
+    reset: () => void;
+    stop: () => void;
+}
+export declare const MRZReader: import("react").ForwardRefExoticComponent<MRZReaderProps & import("react").RefAttributes<MRZReaderHandle>>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MRZReader } from './MRZReader.js';
+export type { MRZReaderProps, MRZReaderHandle } from './MRZReader.js';
+export type { MRZResult, TD1Result, TD2Result, TD3Result, ValidationResult, TD3ValidationResult, MRZReaderOptions, MRZReaderInstance } from 'web-mrz-reader';
+export { isMRZ, extractMRZData, parseMrz } from 'web-mrz-reader';

package/dist/web-mrz-reader-react.js

@@ -0,0 +1,41 @@
+import { jsx as R } from "react/jsx-runtime";
+import { forwardRef as l, useRef as s, useImperativeHandle as m, useCallback as d, useEffect as M } from "react";
+import { initMRZReader as x } from "web-mrz-reader";
+import { extractMRZData as j, isMRZ as k, parseMrz as z } from "web-mrz-reader";
+const Z = l(
+  ({ className: o, style: f, onResult: t, onError: n, autoStart: c = !0, ...u }, p) => {
+    const r = s(null), e = s(null);
+    m(p, () => ({
+      capture: () => e.current?.capture(),
+      reset: () => e.current?.reset(),
+      stop: () => e.current?.stop()
+    }), []);
+    const i = d(() => {
+      !r.current || e.current || (e.current = x({
+        container: r.current,
+        onResult: (a) => {
+          a && t?.(a);
+        },
+        onError: n,
+        ...u
+      }));
+    }, [t, n, u]);
+    return M(() => (c && i(), () => {
+      e.current?.stop(), e.current = null;
+    }), [c, i]), /* @__PURE__ */ R(
+      "div",
+      {
+        ref: r,
+        className: o,
+        style: { width: "100%", maxWidth: 888, ...f }
+      }
+    );
+  }
+);
+Z.displayName = "MRZReader";
+export {
+  Z as MRZReader,
+  j as extractMRZData,
+  k as isMRZ,
+  z as parseMrz
+};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "web-mrz-reader-react",
+  "version": "1.0.0",
+  "description": "React wrapper for web-mrz-reader — MRZ OCR component for React apps.",
+  "type": "module",
+  "main": "./dist/web-mrz-reader-react.js",
+  "module": "./dist/web-mrz-reader-react.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/web-mrz-reader-react.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --emitDeclarationOnly && vite build --emptyOutDir false",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "mrz",
+    "ocr",
+    "passport",
+    "react",
+    "tesseract",
+    "web-mrz-reader"
+  ],
+  "author": "ilhan negis",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eringen/web-mrz-reader-react.git"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "web-mrz-reader": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.7.3",
+    "vite": "^7.3.1",
+    "web-mrz-reader": "file:../web-mrz/web-mrz-reader-2.0.0.tgz"
+  }
+}