Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-p5 with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("p5/package.json"); // p5 is a peer dependency. var reactP5 = require("react-p5")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-p5 v1.3.2

This Component lets you integrate p5 Sketches into your React App

react-p5

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

GitHub

Installation

npm i react-p5

Usage

import React, { Component } from "react";
import Sketch from "react-p5";

export default class App extends Component {
  x = 50;
  y = 50;

  setup = (p5, canvasParentRef) => {
    p5.createCanvas(500, 500).parent(canvasParentRef); // use parent to render canvas in this ref (without that p5 render this canvas outside your component)
  };
  draw = p5 => {
    p5.background(0);
    p5.ellipse(this.x, this.y, 70, 70);
    // NOTE: Do not use setState in draw function or in functions that is executed in draw function... pls use normal variables or class properties for this purposes
    this.x++;
  };

  render() {
    return <Sketch setup={this.setup} draw={this.draw} />;
  }
}

Props

PropRequiredTypeDescription
classNamefalseStringClassName for canvas parent ref
stylefalseObjectStyles for canvas parent ref
setuptrueFunctionThe setup() function is called once when the program starts.
drawfalseFunctionCalled 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.
windowResizedfalseFunctionThe windowResized() function is called once every time the browser window is resized.
preloadfalseFunctionCalled directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way.
mouseClickedfalseFunctionThe mouseClicked() function is called once after a mouse button has been pressed and then released.
mouseMovedfalseFunctionThe mouseMoved() function is called every time the mouse moves and a mouse button is not pressed.
doubleClickedfalseFunctionThe doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification.
mousePressedfalseFunctionThe mousePressed() function is called once after every time a mouse button is pressed.
mouseWheelfalseFunctionThe function mouseWheel() is executed every time a vertical mouse wheel event is detected either triggered by an actual mouse wheel or by a touchpad.
mouseDraggedfalseFunctionThe 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.
mouseReleasedfalseFunctionThe mouseReleased() function is called every time a mouse button is released.
keyPressedfalseFunctionThe 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.
keyReleasedfalseFunctionThe keyReleased() function is called once every time a key is released. See key and keyCode for more information.
keyTypedfalseFunctionThe keyTyped() function is called once every time a key is pressed, but action keys such as Backspace, Delete, Ctrl, Shift, and Alt are ignored.
touchStartedfalseFunctionThe touchStarted() function is called once after every time a touch is registered.
touchMovedfalseFunctionThe touchMoved() function is called every time a touch move is registered.
touchEndedfalseFunctionThe 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.
deviceMovedfalseFunctionThe 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()
deviceTurnedfalseFunctionThe deviceTurned() function is called when the device rotates by more than 90 degrees continuously.
deviceShakenfalseFunctionThe 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 © GHERCIU, Released under the MIT License.
Authored and maintained by GHERCIU with help from contributors (list).

If you like this repository star⭐ and watch👀 on GitHub

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free