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.
To install the component, run the following:
[npm|yarn|pnpm] [install|add] @p5-wrapper/next @p5-wrapper/reactThen to use the component in your NextJS project you can simply import like so:
import React from "react";
import { type Sketch } from "@p5-wrapper/react";
import { NextReactP5Wrapper } from "@p5-wrapper/next";
const sketch: 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();
};
};
export default function Page() {
return <NextReactP5Wrapper sketch={sketch} />;
}