React Synthetic Event distinguish Left and Right click events

Use:

if (e.button === 0) { // or e.nativeEvent.which === 1
    // do something on left click
}

Here is a DEMO

The property you're looking for is e.button or e.buttons.

The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2.
_{– MDN:Web/Events/click}

However, with or without react, I'm only getting click events with the left mouse button (trackpad). You could use onMouseDown which works for me.

Here's a demo using e.buttons. You may want to preventDefault in onContextMenu also.

onContextMenu={e => console.log("right-click")}


onClick={e => console.log("left-click")}

I found this solution on React's official documentation in the "Mouse Events" section.

Here's the TypeScript definition of onContextMenu's synthetic event.

In modern versions of React (v16+), both onClick and onContextMenu props need to be passed to detect both left- and right-click events:

return <p onClick={handleClick} onContextMenu={handleClick}>Something</p>

You can either check against e.nativeEvent.button (as the other answer implies), or check e.type on the synthetic event itself.

Using e.type

const handleClick = (e) => {
  if (e.type === 'click') {
    console.log('Left click');
  } else if (e.type === 'contextmenu') {
    console.log('Right click');
  }
};

Using e.nativeEvent

const handleClick = (e) => {
  if (e.nativeEvent.button === 0) {
    console.log('Left click');
  } else if (e.nativeEvent.button === 2) {
    console.log('Right click');
  }
};

Here's an updated demo demonstrating how this works.

You may also want to read the React documentation for SyntheticEvent.

(original demo)