use-double-click is a simple React hook for differentiating single and double clicks on the same component.
Check out the demo on Codesandbox
What's wrong with
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
onDoubleClick() callback will fire a single time.
yarn add use-double-click
import useRef from 'react';import useDoubleClick from 'use-double-click';const Button =const buttonRef = ;;return <button =>Click Me</button>
|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|
MIT © Tim Ellenberger