There is a nice onDoubleClick property for React elements. But it only registers the double click when the user release the mouse after the second click.
Is there another prop that will register the double click immediate after the second click and not after the user releases the mouse on the second click?
The event does not exist, but if you need, you can program it!
const CLICK_INTERVAL = 500 // double click interval in ms
const App = () => {
let lastClick = (new Date()).getTime()
const handleMouseDown = () => {
const msNow = (new Date()).getTime()
console.info(msNow - lastClick)
if ((msNow - lastClick) < CLICK_INTERVAL) {
alert('Double!')
}
lastClick = msNow
}
return (
<div>
<button onMouseDown={handleMouseDown}>
Click me
</button>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>