react-p5
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.19 • Public • Published

    react-p5

    This Component lets you integrate p5 Sketches into your React App. DEMO

    GitHub ggpack

    For Tips and Advanced Usage you can read this Blog Post

    Installation

    • npm

      npm i --save react-p5
    • yarn

      yarn add react-p5

    Usage

    For Tips and Advanced Usage you can read this Blog Post

    JavaScript

    import React from "react";
    import Sketch from "react-p5";
    
    	let x = 50;
    	let y = 50;
    export default (props) => {
    	const setup = (p5, canvasParentRef) => {
    		// use parent to render the canvas in this ref
    		// (without that p5 will render the canvas outside of your component)
    		p5.createCanvas(500, 500).parent(canvasParentRef);
    	};
    
    	const draw = (p5) => {
    		p5.background(0);
    		p5.ellipse(x, y, 70, 70);
    		// NOTE: Do not use setState in the draw function or in functions that are executed
    		// in the draw function...
    		// please use normal variables or class properties for these purposes
    		x++;
    	};
    
    	return <Sketch setup={setup} draw={draw} />;
    };

    Typescript

    import React from "react";
    import Sketch from "react-p5";
    import p5Types from "p5"; //Import this for typechecking and intellisense
    
    interface ComponentProps {
    	//Your component props
    }
    
    const YourComponent: React.FC<ComponentProps> = (props: ComponentProps) => {
    	let x = 50;
    	const y = 50;
    
    	//See annotations in JS for more information
    	const setup = (p5: p5Types, canvasParentRef: Element) => {
    		p5.createCanvas(500, 500).parent(canvasParentRef);
    	};
    
    	const draw = (p5: p5Types) => {
    		p5.background(0);
    		p5.ellipse(x, y, 70, 70);
    		x++;
    	};
    
    	return <Sketch setup={setup} draw={draw} />;
    };

    Tips

    • If you need to get the browser event object inside your p5 methods like mouseClicked or others you can do it by accessing the second arg.
    mouseClicked(_p5, event) {
      console.log(event)
    }
    • Events that are accessed using props are always attached to window. That means that events are triggered throughout the whole page (see the p5 docs for reference).

    If you would like to attach events only to canvas see the example below. As an example limiting click events to the canvas:

    const setup = (p5, canvasParentRef) => {
          cnv = p5.createCanvas(width, height).parent(canvasParentRef)
          cnv.mousePressed((event) => {
            console.log("Clicked on the canvas. Event:", event)
          })
        }

    Props

    Prop Required Type Description
    className String ClassName for canvas parent ref
    style Object Styles for canvas parent ref
    setup ✔️ Function The setup() function is called once when the program starts.
    draw Function Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called.
    windowResized Function The windowResized() function is called once every time the browser window is resized.
    preload Function Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way.
    mouseClicked Function The mouseClicked() function is called once after a mouse button has been pressed and then released.
    mouseMoved Function The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.
    doubleClicked Function The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification.
    mousePressed Function The mousePressed() function is called once after every time a mouse button is pressed.
    mouseWheel Function The function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad.
    mouseDragged Function The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. If no mouseDragged() function is defined, the touchMoved() function will be called instead if it is defined.
    mouseReleased Function The mouseReleased() function is called every time a mouse button is released.
    keyPressed Function The keyPressed() function is called once every time a key is pressed. The keyCode for the key that was pressed is stored in the keyCode variable.
    keyReleased Function The keyReleased() function is called once every time a key is released. See key and keyCode for more information.
    keyTyped Function The keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored.
    touchStarted Function The touchStarted() function is called once after every time a touch is registered.
    touchMoved Function The touchMoved() function is called every time a touch move is registered.
    touchEnded Function The touchEnded() function is called every time a touch ends. If no touchEnded() function is defined, the mouseReleased() function will be called instead if it is defined.
    deviceMoved Function The deviceMoved() function is called when the device is moved by more than the threshold value along X, Y or Z axis. The default threshold is set to 0.5. The threshold value can be changed using setMoveThreshold()
    deviceTurned Function The deviceTurned() function is called when the device rotates by more than 90 degrees continuously.
    deviceShaken Function The deviceShaken() function is called when the device total acceleration changes of accelerationX and accelerationY values is more than the threshold value. The default threshold is set to 30.

    Contributing

    1. Fork it!
    2. Create your feature branch: git checkout -b my-new-feature
    3. Commit your changes: git commit -am 'Add some feature'
    4. Push to the branch: git push origin my-new-feature
    5. Submit a pull request :D

    Or you can sponsor via Open Collective

    Open Collective

    Author

    @Gherciu/react-p5 Released under the MIT License.
    Authored and maintained by GHERCIU GHEORGHE with help from contributors (list).

    If you like this repository star and watch👀 on GitHub

    Keywords

    Install

    npm i react-p5

    DownloadsWeekly Downloads

    965

    Version

    1.3.19

    License

    MIT

    Unpacked Size

    906 kB

    Total Files

    14

    Last publish

    Collaborators

    • gherciu_gheorghe