useDoubleClick

useDoubleClick is a React hook that differentiates between single and double click events. It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.

Interface

function useDoubleClick<E extends HTMLElement>(
  props: Object
): (event: MouseEvent<E>) => void;

Parameters

• propsrequired · Object
  

  Configuration options for click handling.

  • props.delaynumber · 250
    

    The number of milliseconds to wait before triggering the single click callback. Defaults to 250ms.

  • props.click(event: MouseEvent<E>) => void
    

    The callback function to be executed on a single click.

  • props.doubleClickrequired · (event: MouseEvent<E>) => void
    

    The callback function to be executed on a double click. Required.

Return Value

• (event: MouseEvent<E>) => void
  

  click handler function to attach to an element's onClick event.

Example

function GalleryCard() {
  const [selected, setSelected] = useState(false);

  const handleClick = () => setSelected(prev => !prev);
  const handleDoubleClick = () => alert('Zoom in!');

  const handleEvent = useDoubleClick({
    click: handleClick,
    doubleClick: handleDoubleClick,
  });

  return (
    <div onClick={handleEvent}>{selected ? 'Selected' : 'Not selected'}</div>
  );
}