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

Compilation

// Both commands compile the code to the dist folder as well as in the examples projects. You can use them while developing

// building the library from what's inside the "src" folder to the "dist" folder
npm run build-bundle

// building the library and include all the dependencies into the library code, from what's inside the "src" folder to the "dist" folder
npm run build-bundle-modules

Usage

For React

import React, {Component} from 'react'
// import as for fancy name
import {ReactP5Wrapper as P5} from 'p5wrappers'

import yourSketch from './yourDir/yourSketch'

// Yes I prefer class components rather than functionnal components
// But you can write yours the way you want
class YourComponent extends Component {

    constructor(props) {
        super(props)
        this.state = {
            sketch: yourSketch,
            backgroundColor: '#F4F4F4'
        }
    }

    render() {
        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={this.state.sketch} data={{backgroundColor}} />
            </div>
        )
    }
}

export default YourComponent

For Vue

<template>
    <div>
        <!-- Your stuff -->

        <!-- 
        You can pass some data object into the component 
        via the "data" props to receive it in the sketch script
        -->
        <P5 :sketch="sketch" :data="{backgroundColor}" />
    </div>
</template>

<script>
// import as for fancy name
import {VueP5Wrapper as P5} from 'p5wrappers'

import yourSketch from './yourDir/yourSketch'

export default {
    name: 'YourComponent',
    components: {
        P5,
    },
    data() {
        return {
            sketch: yourSketch,
            backgroundColor: '#F4F4F4'
        }
    }
}
</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