-
npm
npm i --save react-p5
-
yarn
yarn add react-p5
import React from "react";
import Sketch from "react-p5";
export default (props) => {
let x = 50;
const y = 50;
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} />;
};
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} />;
};
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. |
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Or you can sponsor via Open Collective
@Gherciu/react-p5 Β©οΈ GHERCIU, Released under the MIT License.
Authored and maintained by GHERCIU with help from contributors (list).