feat: add react hooks

package.json

@@ -32,7 +32,27 @@
     },
     "./reader/zxing_reader.wasm": "./dist/reader/zxing_reader.wasm",
     "./writer/zxing_writer.wasm": "./dist/writer/zxing_writer.wasm",
-    "./full/zxing_full.wasm": "./dist/full/zxing_full.wasm"
+    "./full/zxing_full.wasm": "./dist/full/zxing_full.wasm",
+    "./react": {
+      "import": "./dist/es/react/full/index.js",
+      "require": "./dist/cjs/react/full/index.js",
+      "default": "./dist/es/react/full/index.js"
+    },
+    "./react/full": {
+      "import": "./dist/es/react/full/index.js",
+      "require": "./dist/cjs/react/full/index.js",
+      "default": "./dist/es/react/full/index.js"
+    },
+    "./react/reader": {
+      "import": "./dist/es/react/reader/index.js",
+      "require": "./dist/cjs/react/reader/index.js",
+      "default": "./dist/es/react/reader/index.js"
+    },
+    "./react/writer": {
+      "import": "./dist/es/react/writer/index.js",
+      "require": "./dist/cjs/react/writer/index.js",
+      "default": "./dist/es/react/writer/index.js"
+    }
   },
   "repository": {
     "type": "git",
@@ -41,7 +61,7 @@
   "homepage": "https://github.com/Sec-ant/zxing-wasm",
   "bugs": {
     "url": "https://github.com/Sec-ant/zxing-wasm/issues",
-    "email": "[email protected]"
+    "email": "[email protected]"
   },
   "keywords": [
     "qrcode",
@@ -106,13 +126,15 @@
     "@babel/types": "^7.23.6",
     "@types/babel__core": "^7.20.5",
     "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
     "concurrently": "^8.2.2",
     "copy-files-from-to": "^3.9.1",
     "eslint": "^8.56.0",
     "npm-check-updates": "^16.14.12",
     "prettier": "^3.1.1",
+    "react": "^18.2.0",
     "rimraf": "^5.0.5",
     "tsx": "^4.7.0",
     "typedoc": "^0.25.6",

scripts/build-iife.ts

@@ -19,7 +19,14 @@ async function buildIife() {
               formats: ["iife"],
               name: "ZXingWASM",
             },
-            rollupOptions: undefined,
+            rollupOptions: {
+              external: ["react"],
+              output: {
+                globals: {
+                  react: "React",
+                },
+              },
+            },
             outDir: "dist/iife",
             emptyOutDir: false,
           },

src/react/full/index.ts

@@ -0,0 +1 @@
+export * from "./useZXingWasm.js";

src/react/full/useZXingWasm.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from "react";
+import {
+  type ReaderOptions,
+  readBarcodesFromImageData as _readBarcodesFromImageData,
+  readBarcodesFromImageFile as _readBarcodesFromImageFile,
+  type WriterOptions,
+  writeBarcodeToImageFile as _writeBarcodeToImageFile,
+  setZXingModuleOverrides,
+} from "../../full/index.js";
+
+export const useZXingWasm = (
+  wasmLocation?: string,
+  readerOptions?: ReaderOptions,
+  writerOptions?: WriterOptions,
+) => {
+  // re-init zxing module when wasm location changes
+  useEffect(() => {
+    if (typeof wasmLocation === "undefined") {
+      return;
+    }
+    setZXingModuleOverrides({
+      locateFile: (path, prefix) => {
+        if (path.endsWith(".wasm")) {
+          return wasmLocation;
+        }
+        return prefix + path;
+      },
+    });
+  }, [wasmLocation]);
+  // readBarcodesFromImageData
+  const readBarcodesFromImageData = useCallback(
+    (image: ImageData) => {
+      return _readBarcodesFromImageData(image, readerOptions);
+    },
+    [readerOptions],
+  );
+  // readBarcodesFromImageFile
+  const readBarcodesFromImageFile = useCallback(
+    (image: Blob) => {
+      return _readBarcodesFromImageFile(image, readerOptions);
+    },
+    [readerOptions],
+  );
+  // writeBarcodeToImageFile
+  const writeBarcodeToImageFile = useCallback(
+    (text: string) => {
+      return _writeBarcodeToImageFile(text, writerOptions);
+    },
+    [writerOptions],
+  );
+  return {
+    readBarcodesFromImageData,
+    readBarcodesFromImageFile,
+    writeBarcodeToImageFile,
+  };
+};

src/react/reader/index.ts

@@ -0,0 +1 @@
+export * from "./useZXingWasm.js";

src/react/reader/useZXingWasm.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect } from "react";
+import {
+  type ReaderOptions,
+  readBarcodesFromImageData as _readBarcodesFromImageData,
+  readBarcodesFromImageFile as _readBarcodesFromImageFile,
+  setZXingModuleOverrides,
+} from "../../reader/index.js";
+
+export const useZXingWasm = (
+  wasmLocation?: string,
+  readerOptions?: ReaderOptions,
+) => {
+  // re-init zxing module when wasm location changes
+  useEffect(() => {
+    if (typeof wasmLocation === "undefined") {
+      return;
+    }
+    setZXingModuleOverrides({
+      locateFile: (path, prefix) => {
+        if (path.endsWith(".wasm")) {
+          return wasmLocation;
+        }
+        return prefix + path;
+      },
+    });
+  }, [wasmLocation]);
+  // readBarcodesFromImageData
+  const readBarcodesFromImageData = useCallback(
+    (image: ImageData) => {
+      return _readBarcodesFromImageData(image, readerOptions);
+    },
+    [readerOptions],
+  );
+  // readBarcodesFromImageFile
+  const readBarcodesFromImageFile = useCallback(
+    (image: Blob) => {
+      return _readBarcodesFromImageFile(image, readerOptions);
+    },
+    [readerOptions],
+  );
+  return {
+    readBarcodesFromImageData,
+    readBarcodesFromImageFile,
+  };
+};

src/react/writer/index.ts

@@ -0,0 +1 @@
+export * from "./useZXingWasm.js";

src/react/writer/useZXingWasm.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect } from "react";
+import {
+  type WriterOptions,
+  writeBarcodeToImageFile as _writeBarcodeToImageFile,
+  setZXingModuleOverrides,
+} from "../../writer/index.js";
+
+export const useZXingWasm = (
+  wasmLocation?: string,
+  writerOptions?: WriterOptions,
+) => {
+  // re-init zxing module when wasm location changes
+  useEffect(() => {
+    if (typeof wasmLocation === "undefined") {
+      return;
+    }
+    setZXingModuleOverrides({
+      locateFile: (path, prefix) => {
+        if (path.endsWith(".wasm")) {
+          return wasmLocation;
+        }
+        return prefix + path;
+      },
+    });
+  }, [wasmLocation]);
+  // writeBarcodeToImageFile
+  const writeBarcodeToImageFile = useCallback(
+    (text: string) => {
+      return _writeBarcodeToImageFile(text, writerOptions);
+    },
+    [writerOptions],
+  );
+  return {
+    writeBarcodeToImageFile,
+  };
+};

typedoc.json

@@ -3,7 +3,11 @@
   "entryPoints": [
     "./src/full/index.ts",
     "./src/reader/index.ts",
-    "./src/writer/index.ts"
+    "./src/writer/index.ts",
+    "./src/react/full/index.ts",
+    "./src/react/reader/index.ts",
+    "./src/react/writer/index.ts"
   ],
+  "sortEntryPoints": false,
   "out": "docs"
 }

vite.config.ts

@@ -67,12 +67,16 @@ export default defineConfig({
         "reader/index": "src/reader/index.ts",
         "writer/index": "src/writer/index.ts",
         "full/index": "src/full/index.ts",
+        "react/reader/index": "src/react/reader/index.ts",
+        "react/writer/index": "src/react/writer/index.ts",
+        "react/full/index": "src/react/full/index.ts",
       },
       formats: ["es"],
       fileName: (_, entryName) => `${entryName}.js`,
     },
     outDir: "dist/es",
     rollupOptions: {
+      external: ["react"],
       output: {
         manualChunks: (id) => {
           if (