How to use right mouse click events in use-gesture/react

Question

When I use bind function from the react-use-gesture on a mesh, then the mouse down events on the mesh are overridden by the bind event. And usegesture is only taking only left click events.

I tried adding mousedown events on mesh but it didn't work

Answer 1

I was able to get this to work by using the button property on the event. In my case, I am using the useGesture hook, like this:

const bind = useGesture({
  onMouseDown: (state: any) => {
    if (state.event.button === 2) {
      // right click behavior
    } else {
      // any other button
    }
  }
});

I couldn't find an example in their documentation, but I did find a part of the config called pointer.buttons here that can be used for the drag configuration. The docs mention that this allows the drag to be triggered by buttons other than the left click, and has a link to the MDN Web Docs, MouseEvent: buttons property. Since useGesture passes the event back in the state as state.event, we can then detect which mouse button was used by checking the value of state.event.button.

This is the list of possible button values:

0: No button or un-initialized
1: Primary button (usually the left button)
2: Secondary button (usually the right button) ⬅️
4: Auxiliary button (usually the mouse wheel button or middle button)
8: 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)