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

0 vote129 views1 answer
@testing-library/react-native switch
Javascript React
0 vote146 views1 answer
How to replace strings with react components
Javascript React
0 vote129 views4 answers
How to pass data between routes in react
Javascript React
0 vote90 views1 answer
./src/App.js Module not found: Can't resolve '@fullcalendar/core/main.css' in 'c:\react-souf\src'
Javascript React
0 vote136 views1 answer
Reactjs limit text display 20 200 characters
Javascript React
12 votes128 views1 answer
React chrome extension
Javascript React
0 vote133 views2 answers
React query stop refetch when i switch browser tabs (per query)
Javascript React
1 vote129 views1 answer
How to redirect in ionic react
Javascript React
11 votes125 views4 answers
React native flatlist
Javascript React
0 vote126 views1 answer
How to add react.memo in export list
Javascript React