use-double-click
use-double-click is a simple React hook for differentiating single and double clicks on the same component.
Documentation https://timellenberger.com/libraries/use-double-click
Check out the demo on Codesandbox
What's wrong with onDoubleClick()?
When you double click on an element, onClick() fires twice alongside your single onDoubleClick() callback. This effect isn't desirable when a single click and a double click have different functions!
useDoubleClick() waits within a latency window after a click for a secondary click, and only after this period either the onSingleClick or onDoubleClick() callback will fire a single time.
Install
yarn add use-double-clickUsage
import { useRef } from 'react';
import useDoubleClick from 'use-double-click';
const Button = () => {
const buttonRef = useRef();
useDoubleClick({
onSingleClick: e => {
console.log(e, 'single click');
},
onDoubleClick: e => {
console.log(e, 'double click');
},
ref: buttonRef,
latency: 250
});
return <button ref={buttonRef}>Click Me</button>
}Props
| Prop | Description |
|---|---|
| onSingleClick | A callback function for single click events |
| onDoubleClick | A callback function for double click events |
| ref | Dom node to watch for double clicks |
| latency | The amount of time (in milliseconds) to wait before differentiating a single from a double click |
License
MIT © Tim Ellenberger