React onDoubleClick Event
The onDoubleClick
event is a handler designed to capture and respond to double clicks on specific elements. It serves as an event listener that triggers a specified function when a user rapidly clicks on the associated element twice within a short time frame.
It is similar to the HTML DOM ondblclick event but uses the camelCase convention in React.
Syntax:
onDoubleClick={onDoubleClickHandler}
Parameter: The callback function onDoubleClickHandler which is invoked when onDoubleClick event is triggered.
Return Type:
It is an event object containing information about the methods and is triggered when mouse is double clicked.
Example 1:
This React functional component displays a greeting message and a button, and when the button is double-clicked, it triggers the `onDoubleClickHandler`, logging a message to the console.
Javascript
import React, { useState } from "react" ; import "./App.css" ; function App() { const onDoubleClickHandler = () => { console.log( "You have Clicked Twice" ); }; return ( <div className= "App" > <h1> Hey Geek!</h1> <button onDoubleClick={onDoubleClickHandler}> Double Click Me! </button> </div> ); } export default App; |
CSS
/* App.css */ .App { display : flex; flex- direction : column; justify- content : center ; align-items: center ; } body { background-color : antiquewhite; } .App>h 2 { text-align : center ; } .App>button { width : 17 rem; font-size : larger ; padding : 2 vmax auto ; height : 2.6 rem; color : white ; background-color : rgb ( 34 , 34 , 33 ); border-radius: 10px ; } button:hover { background-color : rgb ( 80 , 80 , 78 ); } |
Output:
Example 2: This React functional component initializes a state variable `num` and, when a button is double-clicked, invokes the `handleDoubleClick` function to update `num` by incrementing it by 2, displaying the updated value.
Javascript
import React, { useState } from 'react' ; import './App.css' const App = () => { const [num, setNum] = useState(0); const handleDoubleClick = () => { setNum(num + 2); }; return ( <div className= 'App' > <h2> {num}</h2> <button onDoubleClick={handleDoubleClick}> Double Click me </button> </div> ); }; export default App; |
CSS
/* Write CSS Here */ .App { display : flex; flex- direction : column; justify- content : center ; align-items: center ; } body { background-color : antiquewhite; } .App>h 2 { text-align : center ; font-size : 2 rem; } .App>button { width : 15 rem; font-size : larger ; padding : 2 vmax auto ; height : 2.6 rem; color : white ; background-color : rgb ( 34 , 34 , 33 ); border-radius: 10px ; } button:hover { background-color : rgb ( 80 , 80 , 78 ); } |
Output:
Contact Us