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 vote389 views2 answers
Shadow on view in react natice
Javascript React
0 vote367 views1 answer
React load script after render
Javascript React
0 vote390 views1 answer
React throttle render
Javascript React
0 vote346 views1 answer
Render a react component only after API response is received
Javascript React
17 votes375 views4 answers
Appdata roaming npm react-native.ps1 cannot be loaded
Javascript React
0 vote426 views1 answer
Discord bot remove message reaction
Javascript React
12 votes379 views2 answers
How to integrate redux dev tool to react application
Javascript React
11 votes325 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
0 vote372 views1 answer
How to submit form in reactjs and send data in json
Javascript React
1 vote355 views1 answer
React scroll to bottom of div
Javascript React