Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

react-p5

Package Overview
Dependencies
Maintainers
1
Versions
62
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-p5 - npm Package Compare versions

Comparing version
1.3.33
 to
1.3.34
+1
-1
package.json
{
"name": "react-p5",
"version": "1.3.33",
"version": "1.3.34",
"description": "This Component lets you integrate p5 Sketches into your React App",

@@ -5,0 +5,0 @@ "main": "./build/index.js",

+49
-42
README.md

@@ -39,21 +39,21 @@ <div align="center">

let x = 50;
let y = 50;
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 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++;
};
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} />;
return <Sketch setup={setup} draw={draw} />;
};

@@ -70,23 +70,22 @@ ```

interface ComponentProps {
//Your component props
// Your component props
}
let x = 50;
const y = 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);
};
// 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++;
};
const draw = (p5: p5Types) => {
p5.background(0);
p5.ellipse(x, y, 70, 70);
x++;
};
return <Sketch setup={setup} draw={draw} />;
return <Sketch setup={setup} draw={draw} />;
};

@@ -96,4 +95,6 @@ ```

### 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.
```js
```javascript
mouseClicked(_p5, event) {

@@ -105,2 +106,3 @@ 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](https://p5js.org/reference/#/p5.Element/mousePressed)).

@@ -110,9 +112,10 @@

As an example limiting click events to the canvas:
```javascript
const setup = (p5, canvasParentRef) => {
cnv = p5.createCanvas(width, height).parent(canvasParentRef)
cnv.mousePressed((event) => {
console.log("Clicked on the canvas. Event:", event)
})
}
cnv = p5.createCanvas(width, height).parent(canvasParentRef)
cnv.mousePressed((event) => {
console.log("Clicked on the canvas. Event:", event)
})
}
```

@@ -132,3 +135,3 @@

```
```javascript
import dynamic from 'next/dynamic'

@@ -143,3 +146,3 @@

For Gatsby we can use loadable-components. See [Gatsby docs: Load client-side dependent components with loadable-components](https://www.gatsbyjs.com/docs/using-client-side-only-packages/#workaround-4-load-client-side-dependent-components-with-loadable-components).
```
```javascript
import Loadable from "@loadable/component"

@@ -151,12 +154,14 @@

export default LoadablePage;
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 "p5.sound" lib. I created a [Special CodeSandbox DEMO](https://codesandbox.io/s/react-p5-forked-9ixi4?file=/src/index.js) if someone needs to see the implimentation.
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](https://codesandbox.io/s/react-p5-forked-9ixi4?file=/src/index.js) 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 also p5.sound then try to use dynamic imports as in the code bellow which definitelly will help you.
```js
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.
```javascript
import dynamic from 'next/dynamic'

@@ -166,4 +171,6 @@

const Sketch = dynamic(() => import("react-p5").then((mod) => {
// importing sound lib ONLY AFTER REACT-P5 is loaded
// importing sound lib only after react-p5 is loaded
require('p5/lib/addons/p5.sound');
// returning react-p5 default export

@@ -170,0 +177,0 @@ return mod.default

build/index.js

Sorry, the diff of this file is too big to display