P5-wrapper/react

How to load plugins with this?

rchrd2 opened this issue · 5 comments

rchrd2 commented

Is there a way to load p5 plugins using this wrapper?

vennsoh commented

Yes! I just asked a similar question the other day. If you look at the closed issues that mention how to load p5.sound you will see the solution

jamesrweb commented

@rchrd2 see this comment which is what @vennsoh is referring to.

If that doesn't help, please just reply with a more specific example and question. Hope it helps though!

rchrd2 commented

Thanks. It would be nice to have an example of including a plugin in the documentation.

At the time, I ended up not using this plugin and doing the following:

export default () => {
  let targetRef = React.createRef();
  React.useEffect(() => {
    new p5(sketch2, targetRef.current);
  }, []);
  return (
    <>
      <Head>
        <script src="/p5/p5.js"></script>
        <script src="/p5-play/lib/p5.play.js"></script>
        <script src="/p5/addons/p5.sound.min.js"></script>
      </Head>
      <div ref={targetRef}></div>
    </>
  );
};

Thanks for the suggestions.

  • 👍1
  • 🚀2
vennsoh commented

Thanks. It would be nice to have an example of including a plugin in the documentation.

At the time, I ended up not using this plugin and doing the following:

export default () => {
  let targetRef = React.createRef();
  React.useEffect(() => {
    new p5(sketch2, targetRef.current);
  }, []);
  return (
    <>
      <Head>
        <script src="/p5/p5.js"></script>
        <script src="/p5-play/lib/p5.play.js"></script>
        <script src="/p5/addons/p5.sound.min.js"></script>
      </Head>
      <div ref={targetRef}></div>
    </>
  );
};

Thanks for the suggestions.

Interesting approach! Do you happen to have a repo to demonstrate how you put all these together? I'd love to learn. Thanks.

rchrd2 commented

Unfortunately this is not for a public repository. I forgot to mention I was using nextjs. So <Head> comes from next-head.