Combine p5 with react

export default function sketch(p){
    let canvas;

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

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

    p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
      if(canvas) //Make sure the canvas has been created
        p.fill(newProps.color);
    }
}

Combine p5 with react

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch';
import './App.css';

class App extends Component {
  constructor(){
    super();
    this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
    this.randomColor = this.randomColor.bind(this);
  }

  randomColor(){
    this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
    )
  }

  render() {
    return (
      <div>
        <button onClick={this.randomColor}>Random Color</button>
        <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
      </div>
    );
  }
}

export default App;

Similar codes

1 vote397 views1 answer
React variable in stirng
Javascript React
0 vote397 views1 answer
React userefrence example
Javascript React
2 votes387 views2 answers
React native image swiper
Javascript React
1 vote361 views1 answer
Document not intialized react js
Javascript React
0 vote374 views1 answer
How to print an array inside another array in react
Javascript React
3 votes377 views1 answer
How to go to another page onclick in react
Javascript React
11 votes371 views2 answers
React router refreshes page
Javascript React
19 votes366 views3 answers
React Hooks append state
Javascript React
23 votes364 views2 answers
Create-react-app npm yarn
Javascript React
0 vote413 views1 answer
`ForwardRef(ListboxComponent)`, expected a ReactNode. at ListboxComponent
Javascript React