{"repo":"P5-wrapper/react","free":true,"listed":false,"github":"https://github.com/P5-wrapper/react","clone":"git clone https://github.com/P5-wrapper/react.git","description":"A wrapper component that allows you to utilise P5 sketches within React apps.","language":"TypeScript","stars":563,"topics":["react","p5","animation","component","sketches","creative-coding","graphics-programming","typescript","javascript","p5js"],"license":"MIT","category":"ui-components","readme_excerpt":"@P5-wrapper/react A component to integrate P5.js sketches into React apps. Migrating from version 4? Breaking changes in v5: 1. Component rename - ReactP5Wrapper → P5Canvas 2. Types - P5WrapperProps → P5CanvasProps - P5WrapperClassName → CanvasContainerClassName 3. Peer dependencies - p5 = 2.0.0 - react = 19.0.0 - react-dom = 19.0.0 If you are still using version 4, you can find the documentation here. Installation p5 , react and react-dom are peer dependencies and must be installed in your project. TypeScript setup Install the p5 type definitions as a dev dependency: Next.js setup For Next.js applications, use our Next.js dynamic implementation: See the Next.js dynamic implementation docs for further details. Demo & Examples A live demo can be viewed at P5-wrapper.github.io/react. The repository also contains example sketches. To run the examples locally: Then open http://localhost:3001 in a browser. Usage JavaScript TypeScript The sketch prop is a function that receives a p5 instance. You can type it using either the Sketch type or the P5CanvasInstance type: Sketch auto-types the p5 argument for you. If you prefer a regular function declaration, you can use P5CanvasInstance directly: Using abstracted setup and draw functions If you prefer to split your sketch logic into separate functions: Props You can pass any custom props to P5Canvas . These are forwarded to the updateWithProps method if you define it in your sketch. Reacting to props updateWithProps is called on initial","default_branch":null,"files":null,"tree":[],"storefront":"/r/P5-wrapper","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/P5-wrapper/react/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}