combine p5 with react

1export default function sketch(p){
2    let canvas;
3
4    p.setup = () => {
5      canvas = p.createCanvas(300, 200);
6      p.noStroke();
7    }
8
9    p.draw = () => {
10      p.background('orangered');
11      p.ellipse(150, 100, 100, 100);
12    }
13
14    p.myCustomRedrawAccordingToNewPropsHandler = (newProps) => {
15      if(canvas) //Make sure the canvas has been created
16        p.fill(newProps.color);
17    }
18}

1import React, { Component } from 'react';
2import P5Wrapper from 'react-p5-wrapper';
3import sketch from './sketches/sketch';
4import './App.css';
5
6class App extends Component {
7  constructor(){
8    super();
9    this.state = {color:[Math.random()*255, Math.random()*255, Math.random()*255]};
10    this.randomColor = this.randomColor.bind(this);
11  }
12
13  randomColor(){
14    this.setState({color:[Math.random()*255, Math.random()*255, Math.random()*255]}
15    )
16  }
17
18  render() {
19    return (
20      <div>
21        <button onClick={this.randomColor}>Random Color</button>
22        <P5Wrapper sketch={sketch} color={this.state.color}></P5Wrapper>
23      </div>
24    );
25  }
26}
27
28export default App;