q5-react/dist/index.mjs

> Minimal React wrapper for [q5](https://github.com/q5js/q5.js) — like p5, but faster ⚡

import { jsx as m } from "react/jsx-runtime";
import { useRef as u, useMemo as w, useEffect as a } from "react";
import q from "q5";
const C = ({
  size: e = 500,
  draw: i,
  sharedState: l,
  children: v
}) => {
  const s = u(null), n = u(null), f = u(l), o = u(i), r = w(() => e === "fullscreen" ? [window.innerWidth, window.innerHeight] : typeof e == "number" ? [e, e] : e, [e]);
  return a(() => {
    const c = document.createElement("style");
    return c.textContent = ".q5-canvas-fullscreen{width:100vw;height:100vh;position:fixed;inset:0;z-index:9999;overflow:hidden}.q5-canvas{position:relative}.q5-canvas canvas,.q5-canvas-fullscreen canvas{position:absolute;inset:0}.q5-canvas .q5-canvas-overlay,.q5-canvas-fullscreen .q5-canvas-overlay{position:absolute;inset:0;z-index:10000;user-select:none;pointer-events:none}", document.head.appendChild(c), () => c.remove();
  }, []), a(() => {
    o.current = i;
  }, [i]), a(() => {
    f.current = l;
  }, [l]), a(() => {
    if (n.current && (n.current.remove(), n.current = null), !s.current) return;
    const c = setTimeout(() => {
      if (n.current || !s.current) return;
      const h = (t) => {
        t.setup = () => {
          t.createCanvas(r[0], r[1]);
        }, t.draw = () => {
          var d;
          (d = o.current) == null || d.call(o, t, f.current ?? {});
        }, t.windowResized = () => {
          e === "fullscreen" && t.resizeCanvas(t.windowWidth, t.windowHeight);
        };
      };
      n.current = new q(h, s.current);
    }, 0);
    return () => {
      clearTimeout(c), n.current && (n.current.remove(), n.current = null);
    };
  }, [e, r]), /* @__PURE__ */ m(
    "div",
    {
      ref: s,
      className: e === "fullscreen" ? "q5-canvas-fullscreen" : "q5-canvas",
      style: { width: r[0], height: r[1] },
      children: v && /* @__PURE__ */ m("div", { className: "q5-canvas-overlay", children: v })
    }
  );
};
export {
  C as default
};