feat: add react hooks and components

Sec-ant · Mar 3, 2024 · c0bb843 · c0bb843
1 parent d1681cb
commit c0bb843
Show file tree

Hide file tree

Showing 49 changed files with 3,587 additions and 272 deletions.
diff --git a/README.md b/README.md
@@ -216,8 +216,7 @@ The wasm binary won't be fetched or instantiated unless a [read](#readbarcodesfr
 import { getZXingModule } from "zxing-wasm";
 
 /**
- * This function will trigger the download and
- * instantiation of the wasm binary immediately
+ * This function will trigger the download and instantiation of the wasm binary immediately
  */
 const zxingModulePromise1 = getZXingModule();
 

diff --git a/biome.json b/biome.json
@@ -9,7 +9,8 @@
   },
   "formatter": {
     "enabled": true,
-    "indentStyle": "space"
+    "indentStyle": "space",
+    "formatWithErrors": true
   },
   "linter": {
     "enabled": true,

diff --git a/copy-files-from-to.json b/copy-files-from-to.json
@@ -11,6 +11,10 @@
     {
       "from": "./src/full/*.wasm",
       "to": "./dist/full/"
+    },
+    {
+      "from": "./src/stream/media-track-shims.d.ts",
+      "to": "./dist/"
     }
   ],
   "copyFilesSettings": {

diff --git a/index.html b/index.html
@@ -1,10 +1,13 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
-    <title>ZXing Reader Demo</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ZXing WASM React</title>
   </head>
   <body>
-    <div></div>
-    <script type="module" src="./main.ts"></script>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>
diff --git a/main.ts b/main.ts
diff --git a/main.tsx b/main.tsx
@@ -0,0 +1,45 @@
+/// <reference types="./src/stream/media-track-shims" />
+
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client";
+import { StreamBarcodeDetector } from "./src/react/components/StreamBarcodeDetector.js";
+
+import type { InitConstraints } from "./src/stream/index.js";
+
+const App = () => {
+  const [initConstraints] = useState<InitConstraints>({
+    video: {
+      aspectRatio: undefined,
+    },
+  });
+
+  const [videoConstraints] = useState<MediaTrackConstraints>({
+    advanced: [
+      {
+        exposureMode: "continuous",
+      },
+    ],
+  });
+
+  return (
+    <StreamBarcodeDetector
+      onScanDetect={(r) => {
+        console.log(r);
+      }}
+      onStreamInspect={(c) => {
+        console.log(c);
+      }}
+      initConstraints={initConstraints}
+      videoConstraints={videoConstraints}
+      scanThrottle={0}
+      negativeDebounce={0}
+      formats={["QRCode"]}
+    />
+  );
+};
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);