#3 made sketch property exchangable

Author: and-who

example/src/example.js

@@ -2,25 +2,32 @@ import React from'react';
 import ReactDOM from 'react-dom';
 import P5Wrapper from 'react-p5-wrapper';
 import sketch from './sketches/sketch';
+import sketch2 from './sketches/sketch2';
 
 class App extends React.Component{
 
 	constructor(props) {
 		super(props);
 		this.state = {
 			rotation: 150,
+			stateSketch: sketch,
 		};
 	}
 
 	rotationChange(e){
 		this.setState({rotation:e.target.value});
 	}
 
+	pressEvent(){
+		this.state.stateSketch === sketch ? this.setState({stateSketch:sketch2}) : this.setState({stateSketch:sketch});
+	}
+
 	render () {
 		return (
 			<div>
-				<P5Wrapper sketch={sketch} rotation={this.state.rotation}/>
+				<P5Wrapper sketch={this.state.stateSketch} rotation={this.state.rotation}/>
 				<input type="range" value={this.state.rotation}  min="0"  max="360" step="1" onInput={this.rotationChange.bind(this)}/>
+				<button onClick={this.pressEvent.bind(this)}>Change Sketch</button>
 			</div>
 		);
 	}

example/src/sketches/sketch2.js

@@ -0,0 +1,31 @@
+export default function sketch (p) {
+  let rotation = 0;
+
+  p.setup = function () {
+    p.createCanvas(600, 400, p.WEBGL);
+  };
+
+  p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
+    if (props.rotation){
+      rotation = (props.rotation+90) * Math.PI / 180;
+    }
+  };
+  p.draw = function () {
+    p.background(100);
+    p.noStroke();
+
+    p.push();
+    p.translate(-150, 100);
+    p.rotateY(rotation);
+    p.rotateX(-0.9);
+    p.box(100);
+    p.pop();
+
+    p.noFill();
+    p.stroke(255);
+    p.push();
+    p.translate(500, p.height*0.35, -200);
+    p.sphere(100);
+    p.pop();
+  };
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-p5-wrapper",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "p5-wrapper",
   "main": "lib/P5Wrapper.js",
   "author": {

src/P5Wrapper.js

@@ -5,10 +5,16 @@ export default class P5Wrapper extends React.Component {
 
   componentDidMount() {
     this.canvas = new p5(this.props.sketch, this.wrapper);
-    this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props);
+    if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) {
+      this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props);
+    }
   }
 
   componentWillReceiveProps(newprops) {
+    if(this.props.sketch !== newprops.sketch){
+      this.wrapper.removeChild(this.wrapper.childNodes[0]);
+      this.canvas = new p5(newprops.sketch, this.wrapper);
+    }
     if( this.canvas.myCustomRedrawAccordingToNewPropsHandler ) {
       this.canvas.myCustomRedrawAccordingToNewPropsHandler(newprops);
     }