@wirunrom/hqr-generate 0.2.23 → 0.3.11

package/react/useQrDecodeFromImageSrc.js

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { useQrDecodeFromImageData } from "./useQrDecodeFromImageData.js";
+
+async function loadImageData(src) {
+  const img = new Image();
+  img.crossOrigin = "anonymous";
+  img.src = src;
+  await img.decode();
+
+  const canvas = document.createElement("canvas");
+  canvas.width = img.width;
+  canvas.height = img.height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas not supported");
+
+  ctx.drawImage(img, 0, 0);
+  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+export function useQrDecodeFromImageSrc(src) {
+  const [imageData, setImageData] = useState(null);
+  const [loadError, setLoadError] = useState(null);
+
+  useEffect(() => {
+    if (!src) {
+      setImageData(null);
+      setLoadError(null);
+      return;
+    }
+
+    let alive = true;
+
+    loadImageData(src)
+      .then((data) => {
+        if (alive) {
+          setImageData(data);
+          setLoadError(null);
+        }
+      })
+      .catch((err) => {
+        if (alive) {
+          setImageData(null);
+          setLoadError(err);
+        }
+      });
+
+    return () => {
+      alive = false;
+    };
+  }, [src]);
+
+  const decode = useQrDecodeFromImageData(imageData);
+
+  return {
+    ...decode,
+    loadError,
+  };
+}

package/react/useQrPngBlobUrl.d.ts

@@ -0,0 +1,6 @@
+import { UseQrPngOptions } from ".";
+
+export declare function useQrPngBlobUrl(
+  text: string,
+  opts?: UseQrPngOptions,
+): string;

package/react/useQrPngBlobUrl.js

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { qr_png_bytes } from "../index.web.js";
+
+/**
+ * React hook for QR Code as Blob URL (browser-only).
+ * Faster + lower memory than base64 data URL for frequent updates / large images.
+ * @param {string} text
+ * @param {{size?:number, margin?:number, ecc?:"L"|"M"|"Q"|"H"}} [opts]
+ */
+export function useQrPngBlobUrl(text, opts) {
+  const size = opts?.size ?? 320;
+  const margin = opts?.margin ?? 4;
+  const ecc = opts?.ecc ?? "Q";
+
+  const [src, setSrc] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+    let objectUrl = "";
+
+    if (!text) {
+      setSrc("");
+      return () => {
+        alive = false;
+        if (objectUrl) URL.revokeObjectURL(objectUrl);
+      };
+    }
+
+    qr_png_bytes(text, size, margin, ecc)
+      .then((bytes) => {
+        if (!alive) return;
+
+        // revoke old url (if any)
+        if (objectUrl) URL.revokeObjectURL(objectUrl);
+
+        objectUrl = URL.createObjectURL(
+          new Blob([bytes], { type: "image/png" }),
+        );
+        setSrc(objectUrl);
+      })
+      .catch(() => {
+        if (alive) setSrc("");
+      });
+
+    return () => {
+      alive = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [text, size, margin, ecc]);
+
+  return src;
+}

package/react/useQrPngDataUrl.d.ts

@@ -0,0 +1,6 @@
+import { UseQrPngOptions } from ".";
+
+export declare function useQrPngDataUrl(
+  text: string,
+  opts?: UseQrPngOptions,
+): string;

package/react/useQrPngDataUrl.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { qr_png_data_url } from "../index.web.js";
+
+/**
+ * React hook for QR Code Data URL (browser-only).
+ * Backward-compatible, but heavier than Blob URL due to base64.
+ * @param {string} text
+ * @param {{size?:number, margin?:number, ecc?:"L"|"M"|"Q"|"H"}} [opts]
+ */
+export function useQrPngDataUrl(text, opts) {
+  const size = opts?.size ?? 320;
+  const margin = opts?.margin ?? 4;
+  const ecc = opts?.ecc ?? "Q";
+
+  const [src, setSrc] = useState("");
+
+  useEffect(() => {
+    let alive = true;
+
+    if (!text) {
+      setSrc("");
+      return () => {
+        alive = false;
+      };
+    }
+
+    qr_png_data_url(text, size, margin, ecc)
+      .then((res) => {
+        if (alive) setSrc(res);
+      })
+      .catch(() => {
+        if (alive) setSrc("");
+      });
+
+    return () => {
+      alive = false;
+    };
+  }, [text, size, margin, ecc]);
+
+  return src;
+}