Handling left click, right click, and double click simultaneously in react

Photo by Annie Spratt on Unsplash

This is a useful tutorial that you will need if you want to support an application that handles single click, double click, and right click activities at the same time.

First of all, create a react application and replace app.js with the following content:

To do single click, it is as simple as calling an onClick. However, it does not differentiate between one click versus a double click. To achieve, we need to store the amount of clicks we have in a state.

In a useEffect, we check how many clicks we have. If we have one click, we set a timeout to avoid capturing the second click. Else, if we have two clicks, then we can view it as a double click.

For right Click, we need to set it to onContextMenu and check if the event type is a contextmenu. If it is, we have triggered a right click event.