Use-double-click NPM

use-double-click

npm bundle size

use-double-click is a simple React hook for differentiating single and double clicks on the same component.

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-click

Usage

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