mousePressed event returns Undefined about react-p5

[Gherciu]

@bkawk You should use the mousePressed method as a prop, so try and define it outside of setup and then pass it:

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

const App = () => {

  const setup = (p5, parent) => {
    p5.createCanvas(200, 200).parent(parent);
    p5.background(0);
  }

  const draw = p5 => {
  }

  const mousePressed = p5 => {
    p5.fill(255);
    p5.ellipse(p5.mouseX, p5.mouseY, 20);
  }
  return <Sketch setup={setup} draw={draw} mousePressed={mousePressed} />
};

But if you want to listen events on DOM elements not canvas element use pls native js event listeners.
Or can you pls provide more info about why you need mouse event in P5.js ?? In order to help you to resolve your issue.
If you want only to get mouse positions just use p5.mouseX and p5.mouseY.

[bkawk]

I have updated the codepen as you suuggested above, the mousePressed does not fire and draw an ellipse at the mouse location.

I am also keen to know how to get the deltaY of the mouseWheel using props

https://codesandbox.io/embed/withered-monad-jrhyw

[Gherciu]

@bkawk The ellipses are not drawn in your case because you need to move p5.background() in setup method. Pls, reread how p5 draw process work.

[Gherciu]

@bkawk I've made some changes and if you'll update to the latest version. Now you can get the event by accessing the second arg)

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