p5-wrapper
P5.js wrappers for React and Vue.js This Components lets you integrate p5 Sketches into your React & Vue App.
A bug with the bundling of the Vue js component make it unusable at the moment. It will be fixed soon. Sorry for the inconvenience
- 0.1.0 update : Now you can pass a data object to the wrappers to receive data from your components into your sketch scripts
Installation
npm install p5wrappers --save
Usage
For React
// import as for fancy name // Yes I prefer class components rather than functionnal components// But you can write yours the way you want { superprops thisstate = sketch: yourSketch backgroundColor: '#F4F4F4' } { return <div> <!-- Your stuff --> <!-- You can inject some data object into the component via the "data" props to get it in the sketch script --> <P5 sketch=thisstatesketch data=backgroundColor /> </div> }
For Vue
<!-- Your stuff --> <!-- You can pass some data object into the component via the "data" props to receive it in the sketch script -->
A Sketch could look like this and should be passed as a prop into the component: it uses the instance mode of p5, see : https://github.com/processing/p5.js/wiki/Global-and-instance-mode
{ let canvas = null p5 { canvas = p5 } p5 { // You can get the data into the data props const color = p5datacolor p5backgroundcolor }}