init sketch with props

Author: and-who

README.md

@@ -40,13 +40,41 @@ import P5Wrapper from 'react-p5-wrapper';
 <P5Wrapper sketch={sketch} />
 ```
 
-### Properties
+An Sketch could look like this:
 
-* sketch: This is the Sketch Script which should be executed in the P5 Canvas (see Example)
+```
+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 * Math.PI / 180;
+    }
+  };
+
+  p.draw = function () {
+    p.background(100);
+    p.noStroke();
+    p.push();
+    p.rotateY(rotation);
+    p.box(100);
+    p.pop();
+  };
+};
+```
 
-### Notes
+In the Example above you see the `myCustomRedrawAccordingToNewPropsHandler` function.
+This function is called if Properties of the wrapper component are changing.
+In this case the Wrapper Component would be integrated like this: `<P5Wrapper sketch={sketch} rotation={rotation}/>`.
+
+### Properties
 
-You can add custom Properties, which can be used in the Sketch (see Example)
+* sketch: This is the Sketch Script which should be executed in the P5 Canvas
+* You can add as many custom Properties as you want
 
 
 ## Development (`src`, `lib` and the build process)

package.json

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

src/P5Wrapper.js

@@ -4,7 +4,8 @@ import p5 from 'p5';
 export default class P5Wrapper extends React.Component {
 
   componentDidMount() {
-    this.canvas = new p5(this.props.sketch, this.refs.wrapper)
+    this.canvas = new p5(this.props.sketch, this.refs.wrapper);
+    this.canvas.myCustomRedrawAccordingToNewPropsHandler(this.props);
   }
 
   componentWillReceiveProps(newprops) {