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

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

How to load plugins with this? about react HOT 5 CLOSED

p5-wrapper commented on April 20, 2024

How to load plugins with this?

from react.

Comments (5)

rchrd2 commented on April 20, 2024 3

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.

from react.

vennsoh commented on April 20, 2024

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

from react.

jamesrweb commented on April 20, 2024

@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!

from react.

vennsoh commented on April 20, 2024

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.

from react.

rchrd2 commented on April 20, 2024

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

from react.

Recommend Projects