@wirunrom/hqr-generate 0.2.1 → 0.2.2

package/README.md

@@ -1,11 +1,25 @@
 # @wirunrom/hqr-generate
 
-A **stable black-and-white QR Code generator** that returns a **PNG Data URL**, powered by **Rust + WebAssembly (WASM)**.
+A **stable black-and-white QR Code generator** that returns a **PNG Data URL or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
 
-- High contrast (black & white) for maximum scan reliability
-- Designed to work across old and new mobile devices
-- Simple API for frontend usage
-- Compatible with React, Next.js, and modern bundlers
+This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
+
+---
+
+## Features
+
+- High-contrast **black & white only** output (maximum scan compatibility)
+- Optimized for both **old and new mobile devices**
+- Deterministic and consistent QR output
+- Lightweight and fast (**Rust + WASM**)
+- Supports both:
+  - **PNG Data URL** (simple usage)
+  - **PNG raw bytes** (best performance)
+- Works out of the box with:
+  - Plain HTML
+  - React
+  - Next.js (Pages Router & App Router)
+  - Modern bundlers (Vite, Webpack, etc.)
 
 ---
 
@@ -15,18 +29,86 @@ A **stable black-and-white QR Code generator** that returns a **PNG Data URL**,
 npm install @wirunrom/hqr-generate
 ```
 
-## Usage (React / Next.js)
+## Basic Usage (Browser / React / Next.js)
+
+Generate PNG Data URL (simple & compatible)
 
 ```ts
 import { qr_png_data_url } from "@wirunrom/hqr-generate";
 
-const src = await qr_png_data_url(
-  "hello world",
-  320, // image size (px)
-  4, // margin (quiet zone)
-  "Q", // error correction level: L | M | Q | H
-);
+const src = await qr_png_data_url("hello", 320, 4, "Q");
+<img src={src} alt="QR Code" />
+```
+
+Generate PNG Bytes
+Using raw bytes avoids Base64 overhead and is more memory-efficient.
+
+```ts
+import { qr_png_bytes } from "@wirunrom/hqr-generate";
+
+const bytes = await qr_png_bytes("hello", 320, 4, "Q");
+const url = URL.createObjectURL(new Blob([bytes], { type: "image/png" }));
+
+<img src={url} alt="QR Code" />
+```
+
+## React Hook Helper
+
+**useQrPngDataUrl**
+A React hook that generates a PNG Data URL and updates automatically when inputs change.
 
-// Example:
-// <img src={src} alt="QR Code" />
+```ts
+import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngDataUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
+```
+
+**useQrPngBlobUrl**
+A React hook that generates a Blob URL and updates automatically when inputs change.
+
+```ts
+import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngBlobUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
 ```
+
+## API Reference
+
+**qr_png_data_url(text, size?, margin?, ecc?)**
+Generate a QR code and return a PNG Data URL.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |
+
+**qr_png_bytes(text, size?, margin?, ecc?)**
+Generate a QR code and return PNG raw bytes (Uint8Array).
+This is the fastest and most memory-efficient option.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |

package/bundler/react.d.ts

@@ -1,6 +1,23 @@
-import type { QrEcc } from "../index";
+export type QrEcc = "L" | "M" | "Q" | "H";
 
-export declare function useQrCode(
+export interface UseQrPngOptions {
+  size?: number;
+  margin?: number;
+  ecc?: QrEcc;
+}
+
+/**
+ * React hook that returns PNG Data URL string (base64).
+ */
+export declare function useQrPngDataUrl(
+  text: string,
+  opts?: UseQrPngOptions
+): string;
+
+/**
+ * React hook that returns Blob URL string.
+ */
+export declare function useQrPngBlobUrl(
   text: string,
-  opts?: { size?: number; margin?: number; ecc?: QrEcc }
+  opts?: UseQrPngOptions
 ): string;

package/bundler/react.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { qr_png_data_url } from "../index.bundler.js";
+import { qr_png_data_url, qr_png_bytes } from "../index.bundler.js";
 
-export function useQrCode(text, opts) {
+export function useQrPngDataUrl(text, opts) {
   const size = opts?.size ?? 320;
   const margin = opts?.margin ?? 4;
   const ecc = opts?.ecc ?? "Q";
@@ -19,15 +19,53 @@ export function useQrCode(text, opts) {
     }
 
     qr_png_data_url(text, size, margin, ecc)
-      .then((res) => {
-        if (alive) setSrc(res);
+      .then((res) => alive && setSrc(res))
+      .catch(() => alive && setSrc(""));
+
+    return () => {
+      alive = false;
+    };
+  }, [text, size, margin, ecc]);
+
+  return src;
+}
+
+/**
+ * Faster than base64 data url: uses Blob URL + revokes on cleanup
+ */
+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;
+        if (objectUrl) URL.revokeObjectURL(objectUrl);
+        objectUrl = URL.createObjectURL(
+          new Blob([bytes], { type: "image/png" }),
+        );
+        setSrc(objectUrl);
       })
-      .catch(() => {
-        if (alive) setSrc("");
-      });
+      .catch(() => alive && setSrc(""));
 
     return () => {
       alive = false;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
   }, [text, size, margin, ecc]);
 

package/index.bundler.js

@@ -1,5 +1,6 @@
 import init, {
   qr_png_data_url as _qr_png_data_url,
+  qr_png_bytes as _qr_png_bytes,
 } from "./pkg/bundler/hqr_generate.js";
 
 let _initPromise;
@@ -13,3 +14,8 @@ export async function qr_png_data_url(text, size = 320, margin = 4, ecc = "Q") {
   await ensureInit();
   return _qr_png_data_url(text, size, margin, ecc);
 }
+
+export async function qr_png_bytes(text, size = 320, margin = 4, ecc = "Q") {
+  await ensureInit();
+  return _qr_png_bytes(text, size, margin, ecc);
+}

package/index.d.ts

@@ -1,8 +1,22 @@
 export type QrEcc = "L" | "M" | "Q" | "H";
 
+/**
+ * Generate QR code PNG as Data URL (base64).
+ */
 export declare function qr_png_data_url(
   text: string,
   size?: number,
   margin?: number,
   ecc?: QrEcc
 ): Promise<string>;
+
+/**
+ * Generate QR code PNG as raw bytes (Uint8Array).
+ * Recommended for best performance (Blob URL, upload, caching).
+ */
+export declare function qr_png_bytes(
+  text: string,
+  size?: number,
+  margin?: number,
+  ecc?: QrEcc
+): Promise<Uint8Array>;

package/index.web.js

@@ -1,5 +1,6 @@
 import init, {
   qr_png_data_url as _qr_png_data_url,
+  qr_png_bytes as _qr_png_bytes,
 } from "./pkg/web/hqr_generate.js";
 
 let _initPromise;
@@ -21,3 +22,8 @@ export async function qr_png_data_url(text, size = 320, margin = 4, ecc = "Q") {
   await ensureInit();
   return _qr_png_data_url(text, size, margin, ecc);
 }
+
+export async function qr_png_bytes(text, size = 320, margin = 4, ecc = "Q") {
+  await ensureInit();
+  return _qr_png_bytes(text, size, margin, ecc);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wirunrom/hqr-generate",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Stable black/white QR code generator (PNG data URL) powered by Rust + WASM",
   "type": "module",
   "files": [

package/pkg/bundler/README.md

@@ -1,11 +1,25 @@
 # @wirunrom/hqr-generate
 
-A **stable black-and-white QR Code generator** that returns a **PNG Data URL**, powered by **Rust + WebAssembly (WASM)**.
+A **stable black-and-white QR Code generator** that returns a **PNG Data URL or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
 
-- High contrast (black & white) for maximum scan reliability
-- Designed to work across old and new mobile devices
-- Simple API for frontend usage
-- Compatible with React, Next.js, and modern bundlers
+This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
+
+---
+
+## Features
+
+- High-contrast **black & white only** output (maximum scan compatibility)
+- Optimized for both **old and new mobile devices**
+- Deterministic and consistent QR output
+- Lightweight and fast (**Rust + WASM**)
+- Supports both:
+  - **PNG Data URL** (simple usage)
+  - **PNG raw bytes** (best performance)
+- Works out of the box with:
+  - Plain HTML
+  - React
+  - Next.js (Pages Router & App Router)
+  - Modern bundlers (Vite, Webpack, etc.)
 
 ---
 
@@ -15,18 +29,86 @@ A **stable black-and-white QR Code generator** that returns a **PNG Data URL**,
 npm install @wirunrom/hqr-generate
 ```
 
-## Usage (React / Next.js)
+## Basic Usage (Browser / React / Next.js)
+
+Generate PNG Data URL (simple & compatible)
 
 ```ts
 import { qr_png_data_url } from "@wirunrom/hqr-generate";
 
-const src = await qr_png_data_url(
-  "hello world",
-  320, // image size (px)
-  4, // margin (quiet zone)
-  "Q", // error correction level: L | M | Q | H
-);
+const src = await qr_png_data_url("hello", 320, 4, "Q");
+<img src={src} alt="QR Code" />
+```
+
+Generate PNG Bytes
+Using raw bytes avoids Base64 overhead and is more memory-efficient.
+
+```ts
+import { qr_png_bytes } from "@wirunrom/hqr-generate";
+
+const bytes = await qr_png_bytes("hello", 320, 4, "Q");
+const url = URL.createObjectURL(new Blob([bytes], { type: "image/png" }));
+
+<img src={url} alt="QR Code" />
+```
+
+## React Hook Helper
+
+**useQrPngDataUrl**
+A React hook that generates a PNG Data URL and updates automatically when inputs change.
 
-// Example:
-// <img src={src} alt="QR Code" />
+```ts
+import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngDataUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
+```
+
+**useQrPngBlobUrl**
+A React hook that generates a Blob URL and updates automatically when inputs change.
+
+```ts
+import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngBlobUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
 ```
+
+## API Reference
+
+**qr_png_data_url(text, size?, margin?, ecc?)**
+Generate a QR code and return a PNG Data URL.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |
+
+**qr_png_bytes(text, size?, margin?, ecc?)**
+Generate a QR code and return PNG raw bytes (Uint8Array).
+This is the fastest and most memory-efficient option.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |

package/pkg/bundler/hqr_generate.d.ts

@@ -1,4 +1,6 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export function qr_png_data_url(text: string, size: number, margin: number, ecc: string): string;
+export function qr_png_bytes(text: string, size: number, margin: number, ecc: number): Uint8Array;
+
+export function qr_png_data_url(text: string, size: number, margin: number, ecc: number): string;

package/pkg/bundler/hqr_generate.js

@@ -5,5 +5,5 @@ import { __wbg_set_wasm } from "./hqr_generate_bg.js";
 __wbg_set_wasm(wasm);
 wasm.__wbindgen_start();
 export {
-    qr_png_data_url
+    qr_png_bytes, qr_png_data_url
 } from "./hqr_generate_bg.js";

package/pkg/bundler/hqr_generate_bg.js

@@ -2,31 +2,53 @@
  * @param {string} text
  * @param {number} size
  * @param {number} margin
- * @param {string} ecc
+ * @param {number} ecc
+ * @returns {Uint8Array}
+ */
+export function qr_png_bytes(text, size, margin, ecc) {
+    const ptr0 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.qr_png_bytes(ptr0, len0, size, margin, ecc);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {string} text
+ * @param {number} size
+ * @param {number} margin
+ * @param {number} ecc
  * @returns {string}
  */
 export function qr_png_data_url(text, size, margin, ecc) {
-    let deferred4_0;
-    let deferred4_1;
+    let deferred3_0;
+    let deferred3_1;
     try {
         const ptr0 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
         const len0 = WASM_VECTOR_LEN;
-        const ptr1 = passStringToWasm0(ecc, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len1 = WASM_VECTOR_LEN;
-        const ret = wasm.qr_png_data_url(ptr0, len0, size, margin, ptr1, len1);
-        var ptr3 = ret[0];
-        var len3 = ret[1];
+        const ret = wasm.qr_png_data_url(ptr0, len0, size, margin, ecc);
+        var ptr2 = ret[0];
+        var len2 = ret[1];
         if (ret[3]) {
-            ptr3 = 0; len3 = 0;
+            ptr2 = 0; len2 = 0;
             throw takeFromExternrefTable0(ret[2]);
         }
-        deferred4_0 = ptr3;
-        deferred4_1 = len3;
-        return getStringFromWasm0(ptr3, len3);
+        deferred3_0 = ptr2;
+        deferred3_1 = len2;
+        return getStringFromWasm0(ptr2, len2);
     } finally {
-        wasm.__wbindgen_free(deferred4_0, deferred4_1, 1);
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
     }
 }
+export function __wbg___wbindgen_throw_be289d5034ed271b(arg0, arg1) {
+    throw new Error(getStringFromWasm0(arg0, arg1));
+}
+export function __wbg_new_from_slice_a3d2629dc1826784(arg0, arg1) {
+    const ret = new Uint8Array(getArrayU8FromWasm0(arg0, arg1));
+    return ret;
+}
 export function __wbindgen_cast_0000000000000001(arg0, arg1) {
     // Cast intrinsic for `Ref(String) -> Externref`.
     const ret = getStringFromWasm0(arg0, arg1);
@@ -41,6 +63,11 @@ export function __wbindgen_init_externref_table() {
     table.set(offset + 2, true);
     table.set(offset + 3, false);
 }
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
 function getStringFromWasm0(ptr, len) {
     ptr = ptr >>> 0;
     return decodeText(ptr, len);

package/pkg/bundler/hqr_generate_bg.wasm.d.ts

@@ -1,7 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
-export const qr_png_data_url: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number, number];
+export const qr_png_bytes: (a: number, b: number, c: number, d: number, e: number) => [number, number, number];
+export const qr_png_data_url: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
 export const __wbindgen_externrefs: WebAssembly.Table;
 export const __wbindgen_malloc: (a: number, b: number) => number;
 export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;

package/pkg/web/README.md

@@ -1,11 +1,25 @@
 # @wirunrom/hqr-generate
 
-A **stable black-and-white QR Code generator** that returns a **PNG Data URL**, powered by **Rust + WebAssembly (WASM)**.
+A **stable black-and-white QR Code generator** that returns a **PNG Data URL or PNG bytes**, powered by **Rust + WebAssembly (WASM)**.
 
-- High contrast (black & white) for maximum scan reliability
-- Designed to work across old and new mobile devices
-- Simple API for frontend usage
-- Compatible with React, Next.js, and modern bundlers
+This library is designed with a **scan-reliability-first** mindset and a **frontend-first API**, making it easy to use in modern web applications without additional configuration.
+
+---
+
+## Features
+
+- High-contrast **black & white only** output (maximum scan compatibility)
+- Optimized for both **old and new mobile devices**
+- Deterministic and consistent QR output
+- Lightweight and fast (**Rust + WASM**)
+- Supports both:
+  - **PNG Data URL** (simple usage)
+  - **PNG raw bytes** (best performance)
+- Works out of the box with:
+  - Plain HTML
+  - React
+  - Next.js (Pages Router & App Router)
+  - Modern bundlers (Vite, Webpack, etc.)
 
 ---
 
@@ -15,18 +29,86 @@ A **stable black-and-white QR Code generator** that returns a **PNG Data URL**,
 npm install @wirunrom/hqr-generate
 ```
 
-## Usage (React / Next.js)
+## Basic Usage (Browser / React / Next.js)
+
+Generate PNG Data URL (simple & compatible)
 
 ```ts
 import { qr_png_data_url } from "@wirunrom/hqr-generate";
 
-const src = await qr_png_data_url(
-  "hello world",
-  320, // image size (px)
-  4, // margin (quiet zone)
-  "Q", // error correction level: L | M | Q | H
-);
+const src = await qr_png_data_url("hello", 320, 4, "Q");
+<img src={src} alt="QR Code" />
+```
+
+Generate PNG Bytes
+Using raw bytes avoids Base64 overhead and is more memory-efficient.
+
+```ts
+import { qr_png_bytes } from "@wirunrom/hqr-generate";
+
+const bytes = await qr_png_bytes("hello", 320, 4, "Q");
+const url = URL.createObjectURL(new Blob([bytes], { type: "image/png" }));
+
+<img src={url} alt="QR Code" />
+```
+
+## React Hook Helper
+
+**useQrPngDataUrl**
+A React hook that generates a PNG Data URL and updates automatically when inputs change.
 
-// Example:
-// <img src={src} alt="QR Code" />
+```ts
+import { useQrPngDataUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngDataUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
+```
+
+**useQrPngBlobUrl**
+A React hook that generates a Blob URL and updates automatically when inputs change.
+
+```ts
+import { useQrPngBlobUrl } from "@wirunrom/hqr-generate/react";
+
+function QR() {
+  const src = useQrPngBlobUrl("hello world", {
+    size: 320,
+    margin: 4,
+    ecc: "Q",
+  });
+
+  if (!src) return null;
+  return <img src={src} alt="QR Code" />;
+}
 ```
+
+## API Reference
+
+**qr_png_data_url(text, size?, margin?, ecc?)**
+Generate a QR code and return a PNG Data URL.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |
+
+**qr_png_bytes(text, size?, margin?, ecc?)**
+Generate a QR code and return PNG raw bytes (Uint8Array).
+This is the fastest and most memory-efficient option.
+
+| Name   | Type                       | Default | Description                  |
+| ------ | -------------------------- | ------- | ---------------------------- |
+| text   | `string`                   | —       | Text to encode               |
+| size   | `number`                   | `320`   | Image size in pixels         |
+| margin | `number`                   | `4`     | Quiet zone (recommended ≥ 4) |
+| ecc    | `"L" \| "M" \| "Q" \| "H"` | `"Q"`   | Error correction level       |

package/pkg/web/hqr_generate.d.ts

@@ -1,13 +1,16 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export function qr_png_data_url(text: string, size: number, margin: number, ecc: string): string;
+export function qr_png_bytes(text: string, size: number, margin: number, ecc: number): Uint8Array;
+
+export function qr_png_data_url(text: string, size: number, margin: number, ecc: number): string;
 
 export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module;
 
 export interface InitOutput {
     readonly memory: WebAssembly.Memory;
-    readonly qr_png_data_url: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number, number];
+    readonly qr_png_bytes: (a: number, b: number, c: number, d: number, e: number) => [number, number, number];
+    readonly qr_png_data_url: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
     readonly __wbindgen_externrefs: WebAssembly.Table;
     readonly __wbindgen_malloc: (a: number, b: number) => number;
     readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;

package/pkg/web/hqr_generate.js

@@ -4,35 +4,57 @@
  * @param {string} text
  * @param {number} size
  * @param {number} margin
- * @param {string} ecc
+ * @param {number} ecc
+ * @returns {Uint8Array}
+ */
+export function qr_png_bytes(text, size, margin, ecc) {
+    const ptr0 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
+    const len0 = WASM_VECTOR_LEN;
+    const ret = wasm.qr_png_bytes(ptr0, len0, size, margin, ecc);
+    if (ret[2]) {
+        throw takeFromExternrefTable0(ret[1]);
+    }
+    return takeFromExternrefTable0(ret[0]);
+}
+
+/**
+ * @param {string} text
+ * @param {number} size
+ * @param {number} margin
+ * @param {number} ecc
  * @returns {string}
  */
 export function qr_png_data_url(text, size, margin, ecc) {
-    let deferred4_0;
-    let deferred4_1;
+    let deferred3_0;
+    let deferred3_1;
     try {
         const ptr0 = passStringToWasm0(text, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
         const len0 = WASM_VECTOR_LEN;
-        const ptr1 = passStringToWasm0(ecc, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
-        const len1 = WASM_VECTOR_LEN;
-        const ret = wasm.qr_png_data_url(ptr0, len0, size, margin, ptr1, len1);
-        var ptr3 = ret[0];
-        var len3 = ret[1];
+        const ret = wasm.qr_png_data_url(ptr0, len0, size, margin, ecc);
+        var ptr2 = ret[0];
+        var len2 = ret[1];
         if (ret[3]) {
-            ptr3 = 0; len3 = 0;
+            ptr2 = 0; len2 = 0;
             throw takeFromExternrefTable0(ret[2]);
         }
-        deferred4_0 = ptr3;
-        deferred4_1 = len3;
-        return getStringFromWasm0(ptr3, len3);
+        deferred3_0 = ptr2;
+        deferred3_1 = len2;
+        return getStringFromWasm0(ptr2, len2);
     } finally {
-        wasm.__wbindgen_free(deferred4_0, deferred4_1, 1);
+        wasm.__wbindgen_free(deferred3_0, deferred3_1, 1);
     }
 }
 
 function __wbg_get_imports() {
     const import0 = {
         __proto__: null,
+        __wbg___wbindgen_throw_be289d5034ed271b: function(arg0, arg1) {
+            throw new Error(getStringFromWasm0(arg0, arg1));
+        },
+        __wbg_new_from_slice_a3d2629dc1826784: function(arg0, arg1) {
+            const ret = new Uint8Array(getArrayU8FromWasm0(arg0, arg1));
+            return ret;
+        },
         __wbindgen_cast_0000000000000001: function(arg0, arg1) {
             // Cast intrinsic for `Ref(String) -> Externref`.
             const ret = getStringFromWasm0(arg0, arg1);
@@ -54,6 +76,11 @@ function __wbg_get_imports() {
     };
 }
 
+function getArrayU8FromWasm0(ptr, len) {
+    ptr = ptr >>> 0;
+    return getUint8ArrayMemory0().subarray(ptr / 1, ptr / 1 + len);
+}
+
 function getStringFromWasm0(ptr, len) {
     ptr = ptr >>> 0;
     return decodeText(ptr, len);

package/pkg/web/hqr_generate_bg.wasm.d.ts

@@ -1,7 +1,8 @@
 /* tslint:disable */
 /* eslint-disable */
 export const memory: WebAssembly.Memory;
-export const qr_png_data_url: (a: number, b: number, c: number, d: number, e: number, f: number) => [number, number, number, number];
+export const qr_png_bytes: (a: number, b: number, c: number, d: number, e: number) => [number, number, number];
+export const qr_png_data_url: (a: number, b: number, c: number, d: number, e: number) => [number, number, number, number];
 export const __wbindgen_externrefs: WebAssembly.Table;
 export const __wbindgen_malloc: (a: number, b: number) => number;
 export const __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number;

package/react/index.d.ts

@@ -1,6 +1,17 @@
-import type { QrEcc } from "../index";
+export type QrEcc = "L" | "M" | "Q" | "H";
 
-export declare function useQrCode(
+export interface UseQrPngOptions {
+  size?: number;
+  margin?: number;
+  ecc?: QrEcc;
+}
+
+export declare function useQrPngDataUrl(
+  text: string,
+  opts?: UseQrPngOptions
+): string;
+
+export declare function useQrPngBlobUrl(
   text: string,
-  opts?: { size?: number; margin?: number; ecc?: QrEcc }
+  opts?: UseQrPngOptions
 ): string;

package/react/index.js

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
-import { qr_png_data_url } from "../index.web.js";
+import { qr_png_data_url, qr_png_bytes } 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 useQrCode(text, opts) {
+export function useQrPngDataUrl(text, opts) {
   const size = opts?.size ?? 320;
   const margin = opts?.margin ?? 4;
   const ecc = opts?.ecc ?? "Q";
@@ -38,3 +39,53 @@ export function useQrCode(text, opts) {
 
   return src;
 }
+
+/**
+ * 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;
+}