docs: add react hook demo

eslint.config.js

@@ -4,4 +4,5 @@ export default bernankez({
   unocss: true,
   astro: true,
   formatters: true,
+  vue: true,
 });

playground/src/demos/WithReact.tsx

@@ -0,0 +1,42 @@
+import { useBackmoji, useImageLoader, useImageRenderer } from "@backmoji/react";
+import ReactLogo from "/react.svg?url";
+import { useEffect, useRef } from "react";
+import { useLatest } from "ahooks";
+import { useResizeObserver } from "../hooks/useResizeObserver";
+
+export function WithReact() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const img = useImageLoader(ReactLogo);
+  const renderer = useImageRenderer(img);
+  const backmojiResult = useBackmoji(renderer, canvasRef, {
+    height: 150,
+    rowGap: 15,
+    columnGap: 30,
+  });
+  const { render, canvas, setSize } = useLatest(backmojiResult).current;
+  const divRef = useResizeObserver<HTMLDivElement>((entries) => {
+    for (const entry of entries) {
+      const { width, height } = entry.contentRect;
+      setSize?.(width, height);
+      render?.();
+    }
+  });
+
+  useEffect(() => {
+    if (canvas) {
+      setSize?.(divRef.current?.clientWidth, divRef.current?.clientHeight);
+      render?.();
+
+      return () => {
+        canvas.remove();
+      };
+    }
+  }, [canvas]);
+
+  return (
+    <div ref={divRef}>
+      <canvas ref={canvasRef}></canvas>
+    </div>
+  );
+}

playground/src/hooks/useResizeObserver.ts

@@ -0,0 +1,33 @@
+import { useLatest } from "ahooks";
+import { useEffect, useRef, useState } from "react";
+
+export function useResizeObserver<T extends HTMLElement>(
+  callback: ResizeObserverCallback,
+  options?: ResizeObserverOptions,
+): React.RefObject<T> {
+  const ref = useRef<T>(null);
+  const callbackRef = useLatest(callback);
+
+  useEffect(() => {
+    const { current } = ref;
+
+    if (!current) {
+      return;
+    }
+
+    const cb: ResizeObserverCallback = (entries, observer) => {
+      return callbackRef.current(entries, observer);
+    };
+
+    const observer = new ResizeObserver(cb);
+    observer.observe(current, options);
+
+    return () => {
+      if (current) {
+        observer.unobserve(current);
+      }
+    };
+  }, [options]);
+
+  return ref;
+}

playground/src/pages/index.mdx

@@ -127,8 +127,12 @@ render();
 
 ### Render with animation
 
-### Use with React
+### Using with React
 
-### Use with Vue
+import { WithReact } from "@/demos/WithReact";
 
-### Options
+<WithReact client:visible />
+
+### Using with Vue
+
+### Options