react-p5

This Component lets you integrate p5 Sketches into your React App. DEMO

For Tips and Advanced Usage you can read this Blog Post

Installation

• npm

  npm i --save react-p5

• yarn

  yarn add react-p5

Usage

For Tips and Advanced Usage you can read this Blog Post

JavaScript

import React from "react";
import Sketch from "react-p5";

let x = 50;
let y = 50;
export default (props) => {
  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} />;
};

Typescript

import React from "react";
import Sketch from "react-p5";
import p5Types from "p5"; //Import this for typechecking and intellisense

interface ComponentProps {
  // Your component props
}

let x = 50;
const y = 50;
  
const YourComponent: React.FC<ComponentProps> = (props: ComponentProps) => {

  // 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} />;
};

Tips

• If you need to get the browser event object inside your p5 methods like mouseClicked or others you can do it by accessing the second arg.

mouseClicked(_p5, event) {
  console.log(event)
}

Events that are accessed using props are always attached to window.

That means that events are triggered throughout the whole page (see the p5 docs for reference).

If you would like to attach events only to canvas see the example below. As an example limiting click events to the canvas:

const setup = (p5, canvasParentRef) => {
  cnv = p5.createCanvas(width, height).parent(canvasParentRef)
  cnv.mousePressed((event) => {
    console.log("Clicked on the canvas. Event:", event)
  })
}

Using it in an SSR environment (Next.js or Gatsby)

Importing this package for example in a Next.js or Gatsby app may give you this error:

ReferenceError: window is not defined

This is because importing p5 requires window to be available, and it isn't when server side rendering.

For Next.js we can fix this using Next.js dynamic imports with No SSR.

import dynamic from 'next/dynamic'

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import('react-p5').then((mod) => mod.default), {
  ssr: false,
})

For Gatsby we can use loadable-components. See Gatsby docs: Load client-side dependent components with loadable-components.

import Loadable from "@loadable/component"

const Sketch = Loadable(
  () => import("react-p5")
);

export default Sketch;

With p5.sound

I frequently see this question even if the implimentation is super simple. The only needed thing is to import the p5.sound lib. I created a special CodeSandbox demo if someone needs to see the implementation.

With p5.sound + next.js (or other framework which has support for SSR)

This question also is frequently asked and the only difference from the normal aprouch is that in SSR mode the react-p5 lib should not be loaded because p5 doesn't support SSR and there is no sense for it to be support. So, if you are using react-p5 plus next.js and you need p5.sound as well, then try to use dynamic imports as in the code below which will definitely help you.

import dynamic from 'next/dynamic'

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import("react-p5").then((mod) => {

  // importing sound lib only after react-p5 is loaded
  require('p5/lib/addons/p5.sound');

  // returning react-p5 default export
  return mod.default
}), {
  ssr: false
});

When using dynamic import, the type information for the methods extended by p5.sound.d.ts is not loaded. Therefore, we can use Type-Only Imports to address this.

import dynamic from 'next/dynamic'

// importing only type information from p5.sound addons.
import type from "p5/lib/addons/p5.sound"

// Will only import `react-p5` on client-side
const Sketch = dynamic(() => import("react-p5").then((mod) => {

  // importing sound lib only after react-p5 is loaded.
  require('p5/lib/addons/p5.sound');

  // returning react-p5 default export
  return mod.default
}), {
  ssr: false
});

Props

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Or you can sponsor via Open Collective

Author

@Gherciu/react-p5 Released under the MIT License.
Authored and maintained by GHERCIU GHEORGHE with help from contributors (list).

If you like this repository star⭐ and watch👀 on GitHub