Handle double click events in React

avatar

Borislav Hadzhiev

Last updated: Apr 21, 2022

banner

Photo from Unsplash

Handle double click events in React #

To handle double click events in React:

  1. Add an onClick prop to the element.
  2. Use the detail property on the event object to get the click count.
  3. If the click count is equal to 2, handle the double click event.
App.js
export default function App() { const handleClick = event => { console.log(event.detail); switch (event.detail) { case 1: { console.log('single click'); break; } case 2: { console.log('double click'); break; } case 3: { console.log('triple click'); break; } default: { break; } } }; return ( <div> <div> <button onClick={handleClick}>Double click</button> </div> </div> ); }

react double click event

We added an onClick prop to a button element, so every time the button is clicked, the handleClick function is invoked.

The detail property on the event object provides the current click count for click events.

If you double click on the button, the switch statement will run the code for case 1 and case 2.

If you don't want to handle any of the other cases, you can use an if statement to check if event.detail is equal to 2.

App.js
export default function App() { const handleClick = event => { if (event.detail === 2) { console.log('double click'); } }; return ( <div> <div> <button onClick={handleClick}>Double click</button> </div> </div> ); }

The handleClick function explicitly checks if the current click count is equal to 2.

handle double click only

If you only need to handle double click events, this solution should be sufficient.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.