DEV Community

Integrating P5.js with React

Christian on February 13, 2020

In the course of my final project at the Flatiron School in software engineering, I really wanted to push my skills farther than what I was comfort...

Read full post

Summer Rizzo • Mar 4 '20

Thank you so much! I was initially using a package that ultimately made what I was trying to do more complicated (I also needed the ability for user input). I'd probably be tearing my hair out if I didn't stumble upon this.

Christian • Mar 6 '20

Awesome! Stoked to help

dc • Nov 23 '21

Unfortunately this approach just keeps creating new instances of a p5 component on each "hot update" when using create-react-app or similar.

Ricardo Sanchez • Aug 12 '23 • Edited

A solution can be found here lloydatkinson.net/posts/2022/how-t...

Basically, if you follow the example in the comments above all you need to do is:

useEffect(() => {
  const myP5 = new p5(Sketch, myRef.current);
  return myP5.remove;
},[])

This will remove the current p5 instance and creates a new one on the next render

Goksu • Sep 30 '22

yess.. did you find a solution for this? I'm trying to create a sorting visualizer using react and p5 and it's just not working..

WITHERC0D3 • Mar 27 '21

Hello, thanks so much for this constructive document answer. I am new to react and i am developing a project with my friends. I have a doubt regarding the same topic. is there a way to do this as a functional component?

Anshul Sachdev • May 22 '23

import React, { useEffect } from 'react';
import p5 from 'p5';

const App = () => {

const myRef = React.createRef();

const Sketch = (p) => {

 p.setup = () => {
  p.createCanvas(300, 200);
  p.noStroke();
 }

 p.draw = () => {
  p.background('orangered');
  p.ellipse(150, 100, 100, 100);
 }

}

useEffect(() => {
const myP5 = new p5(Sketch, myRef.current)
},[])

return (
  <div ref={myRef}>
    Hello
  </div>
)

}

export default App;

Abby Nduta • May 22 '23

Thanks for the response @anshul16. It will surely help someone in the community.

artydev • Nov 26 '20

Hello Christian,

Thank you.
You can test your code here P5inReact

Regards

Kevin Fredericks • Jul 29 '20 • Edited

THANK YOU SO MUCH. I don't know why we can not import Javascript functions directly in to React components. I guess I am missing something fundamental. Your work is really helpful for my current project. P5.js is great. Cheers.

edit: I also love the way you've structured the projects. Great balance between readability and modularity.

dc • Nov 23 '21

can you be a bit more clear about why this is a better option than using the wrapper libraries, that people have put a lot of work into? I assume there's some complication that is created by that layer of abstraction but fear it would only be after spending a lot of time working on this that would become clear....?

Celetra • Jul 30 '20

Thanks, this was really helpful! I'm using p5 to make a dynamic background for my website, and I was having trouble integrating it into a React app. It's very nice to see how the whole process is put together instead of adding yet another dependency to magically make it work.

Carlos Daniel • Apr 18 '20

"I learned very quickly that best option is to actually just learn the tech and not treat it like a black box", this phrase couldn't be more right!
Thank you, this post was very helpful.

adithyavasudevan • Mar 29 '20

Christian would it be possible for you to Git a stub project? Loved the simplicity of your explanations

Iris • Sep 2 '20

Thank you so much for the tutorial! I'm wondering have you tried to deploying your website? I'm trying to deploy my website which integrated p5.js with react, but it always shows that "(undefined) ReferenceError: window is not defined". Have you encountered this kind of issue?