@P5-wrapper/next

Note:

This library simply re-exports the @P5-wrapper/react (react-p5-wrapper) component as a NextJS dynamic component. Nothing more.

For more in-depth information on the base component, check the documentation via the @P5-wrapper/react (react-p5-wrapper) docs.

Installation

To install the component, run the following:

[npm|yarn|pnpm] [install|add] @p5-wrapper/next @p5-wrapper/react

Usage

Then to use the component in your NextJS project you can simply import like so:

importReactfrom"react";import{typeSketch}from"@p5-wrapper/react";import{NextReactP5Wrapper}from"@p5-wrapper/next";constsketch: Sketch=(p5)=>{p5.setup=()=>p5.createCanvas(600,400,p5.WEBGL);p5.draw=()=>{p5.background(250);p5.normalMaterial();p5.push();p5.rotateZ(p5.frameCount*0.01);p5.rotateX(p5.frameCount*0.01);p5.rotateY(p5.frameCount*0.01);p5.plane(100);p5.pop();};};exportdefaultfunctionPage(){return<NextReactP5Wrappersketch={sketch}/>;}