Package Exports
- use-double-click
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-double-click) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
use-double-click
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 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