q5-react/dist/index.js

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

"use strict";const d=require("react/jsx-runtime"),n=require("react"),q=require("q5"),h=({size:e=500,draw:i,sharedState:a,children:l})=>{const u=n.useRef(null),t=n.useRef(null),f=n.useRef(a),o=n.useRef(i),s=n.useMemo(()=>e==="fullscreen"?[window.innerWidth,window.innerHeight]:typeof e=="number"?[e,e]:e,[e]);return n.useEffect(()=>{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()},[]),n.useEffect(()=>{o.current=i},[i]),n.useEffect(()=>{f.current=a},[a]),n.useEffect(()=>{if(t.current&&(t.current.remove(),t.current=null),!u.current)return;const c=setTimeout(()=>{if(t.current||!u.current)return;const m=r=>{r.setup=()=>{r.createCanvas(s[0],s[1])},r.draw=()=>{var v;(v=o.current)==null||v.call(o,r,f.current??{})},r.windowResized=()=>{e==="fullscreen"&&r.resizeCanvas(r.windowWidth,r.windowHeight)}};t.current=new q(m,u.current)},0);return()=>{clearTimeout(c),t.current&&(t.current.remove(),t.current=null)}},[e,s]),d.jsx("div",{ref:u,className:e==="fullscreen"?"q5-canvas-fullscreen":"q5-canvas",style:{width:s[0],height:s[1]},children:l&&d.jsx("div",{className:"q5-canvas-overlay",children:l})})};module.exports=h;