Handle double click events in React

To Handle double click events in React:

  • Pass a click event handler function into onClick prop of the element.
  • Inside the event handler, check the click count by checking the detail property of the event object.
  • Add condition for detail is equal to 2.

The below code example shows how to handle double click events in React element.

import React from 'react';

export default function App() { 
	
	const clickHandler = (event) => {
		if(event.detail == 2){
			console.log("Double Clicked")
		}
	}
  	return (
		<>
			<button onClick={clickHandler}>Click</button>			
		</>
	);
}

Here we passed a click event handler clickHandler into the onClick prop of a button. Inside the clickHandler function, we have an event as an argument that has detail as a property. The detail property holds the value of number of times the user clicked on the button in a small interval of time.

To check the click count, we have added if condition like:

if(event.detail == 2){
	console.log("Double Clicked")
}

If we want to handle triple click, we can check detail property is equal to 3 as given below.

if(event.detail == 3){
	console.log("Triple Clicked")
}

The event objects contains so much other data related to the click event like:

  • The pagex and pagey coordinates determine where the user clicked the button
  • Whether the shift key or alt key is pressed or not at the time of click
  • Timestamp of the button click etc.

Read more about event handling in React doc.

Use Native onDoubleClick() event

We have a native onDoubleClick() event for handling the double click in React. The below code shows how to use onDoubleClick() in React.

import React from 'react';

export default function App() { 

	const doubleClickHandler = (event) => {
		console.log("double click");
	}
  	return (
		<>
			<button onDoubleClick={doubleClickHandler}>Click</button>			
		</>
	);
}

To handle double click we passed doubleClickHandler into the onDoubleClick prop of the button. So when the user clicks twice on the button, doubleClickHandler function will get invoked.

This approach has a major drawback which can be explained in the below code.

import React from 'react';

export default function App() { 
	
	const singleClickHandler = (event) => {		
		console.log("single click");
	}

	const doubleClickHandler = (event) => {
		console.log("double click");
	}
  	return (
		<>
			<button onClick={singleClickHandler} onDoubleClick={doubleClickHandler}>Click</button>			
		</>
	);
}

The output in the console when a user double clicked on the button is given below.

single click
single click
double click

You may notice that singleClickHandler function was invoked twice before invoking the doubleClickHandler function. This effect isn't desirable when we have a single click and a double click have different functions. So this approach is not suitable if we have separate functionality for single click and double click of elements. In such cases, we opt for the first solution that checks the detail property of event we discussed in this article.

Conclusion

To handle the double click events in React, pass an onClick event handler function into the element. Inside the function check the detail property of the event object to determine the number of counts the user clicked on the element.

Related Blogs

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.

Each child in a list should have a unique key prop

Each child in a list should have a unique key prop

Solve Warning: Each child in a list should have a unique ”key" prop in React by setting the id property as a unique key or by auto-assigning unique keys.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Too many re-renders. React limits the number of renders to prevent an infinite loop

Too many re-renders. React limits the number of renders to prevent an infinite loop

The React error "Too many re-renders. React limits the number of renders to prevent an infinite loop" happens when you have reached an infinite render loop.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

The tag is unrecognized in this browser

Warning: The tag is unrecognized in this browser

Warning "The tag is unrecognized in this browser" occurs when the tag doesn't exist in the browser or when we render a component starting with a lowercase letter.

The style prop expects a mapping from style properties to values, not a string

The style prop expects a mapping from style properties to values, not a string

"The style prop expects a mapping from style properties to values, not a string" React error occurs when we pass a CSS string to the style attribute.