retrieve p5 from parent component as ref

[EricWVGG]

Is there any way to pass p5 back to the parent component as a ref? I'm trying to accomplish something like this:

const sketch: Sketch = (p5) => {
  p5.setup = () => //...

  p5.updateWithProps = (props: any) => {
    if( !props.ref?.current ) {
      props.ref.current = p5
    }
  }
}

const Fx = () => {
  const p5ref = useRef<P5CanvasInstance>(null)
  return (
    <>
      <P5Canvas sketch={sketch} ref={p5ref} />
      <button onClick={() => p5ref.current?.clear()} >Clear</button>
    </>
  )
}

Every time I try this, I start getting wild errors regarding Named export 'GIFEncoder' not found. The requested module 'gifenc' is a CommonJS module

(If I'm not nuts about this idea, I think it would be nice if this could exist in the constructor, where P5Canvas automatically initializes a ref when one is detected, rather than clumsily putting that in updateWithProps.)

[EricWVGG]

btw congrats on getting v5 out the door, I was lucky to start this project just a couple days after shipping

[EricWVGG]

… this seems to work, I’m not crazy about it but hey results

const sketch: Sketch = (p5) => {
  p5.updateWithProps = (props: any) => {
    if( !props.ref.current ) {
      props.ref.current = () => p5.clear()
    }
  }
}

const Fx = () => {
  const clearRef = useRef<() => void>(null)
  return (
    <>
      <P5Canvas sketch={sketch} ref={clearRef} />
      <button onClick={clearRef.current} >Clear</button>
    </>
  )
}

[jamesrweb]

Why not just add an id to the button, grab it with p5 and use the instance you get in the sketch function to attach the listener in setup?

[EricWVGG]

I guess it's sort of a separation of concerns thing… the functionality of my app is all in React and I'd like to keep it that way. I see the p5 thing more as a renderer that is driven by the React app.

I can think of countless other example than "dumb button"… I might have a system of timers and events, or data coming in from a server… I'm doing this in React because reactive UIs are a great paradigm with huge payoffs.

in the Apple Swift ecosystem, you frequently hear the phrase "not very Swifty" when people try to wedge older ObjectiveC paradigms into Swift code. Putting button bindings in p5 would technically work but it's "not very Reacty".

[jamesrweb]

I'll think about it and see what I can think of, since to expose things in the way you're thinking could lead to side effects leaking into the render process and thus affect the sketches themselves.

I'll come back to you in a few days.