react-p5
This Component lets you integrate p5 Sketches into your React App. DEMO
Installation
-
npm
npm i --save react-p5 -
yarn
yarn add react-p5
Usage
JavaScript
;; { let x = 50; const y = 50; const setup = { // use parent to render the canvas in this ref // (without that p5 will render the canvas outside of your component) p5parentcanvasParentRef; }; const draw = { p5background0; p5; // 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 this for typechecking and intellisense ;
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
- 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
Open Collective
Or you can sponsor viaAuthor
@Gherciu/react-p5 ©️ GHERCIU, Released under the MIT License.
Authored and maintained by GHERCIU with help from contributors (list).