pollyroll 0.1.0

package/dist/react.js

@@ -0,0 +1,47 @@
+'use client';
+import { useState, useRef, useEffect, useImperativeHandle, createElement } from 'react';
+import { createDiceTray } from 'pollyroll/render';
+
+// src/react/index.ts
+
+// src/react/skin.ts
+var skinChanged = (next, last) => JSON.stringify(next) !== JSON.stringify(last);
+
+// src/react/index.ts
+function useDiceTray(ref, opts) {
+  const [tray, setTray] = useState(null);
+  const optsRef = useRef(opts);
+  optsRef.current = opts;
+  const skinRef = useRef(opts?.skin);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const created = createDiceTray(el, optsRef.current);
+    skinRef.current = optsRef.current?.skin;
+    setTray(created);
+    return () => {
+      created.dispose();
+      setTray(null);
+    };
+  }, [ref]);
+  const skin = opts?.skin;
+  useEffect(() => {
+    if (!tray || skin === void 0 || !skinChanged(skin, skinRef.current)) return;
+    skinRef.current = skin;
+    tray.setSkin(skin);
+  }, [tray, skin]);
+  return tray;
+}
+function DiceTray(props) {
+  const { trayRef, className, style, ...opts } = props;
+  const ref = useRef(null);
+  const tray = useDiceTray(ref, opts);
+  useImperativeHandle(trayRef, () => tray, [tray]);
+  return createElement("div", {
+    ref,
+    className,
+    style: { position: "absolute", inset: 0, pointerEvents: "none", ...style }
+  });
+}
+
+export { DiceTray, useDiceTray };