Tim Ellenberger

React | GraphQL | Consulting

use-double-click

GitHubCodeSandbox
badgebadgebadgebadgebadge

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

Demo

Native onClick() + onDoubleClick()

[native] onClick: 0[native] onDoubleClick: 0

useDoubleClick() Hook

[hook] onSingleClick: 0[hook] onDoubleClick: 0

What's wrong with native onDoubleClick()?

When you double click on a React component, it's onClick() callback 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.

Installation

This library is built with hooks and requires React >= 16.8.0

Terminalbash
1yarn add use-double-click

Basic Usage

componentsClicker.jsjsx
1import { useRef } from 'react';2import useDoubleClick from 'use-double-click';3
4const Button = () => {5  const buttonRef = useRef();6  7  useDoubleClick({8    /** A callback function for single click events */9    onSingleClick: e => console.log(e, 'single click'),10    /** A callback function for double click events */11    onDoubleClick: e => console.log(e, 'double click'),12    /** (Required) Dom node to watch for double clicks */13    ref: buttonRef,14    /**15     * The amount of time (in milliseconds) to wait 16     * before differentiating a single from a double click17     */18    latency: 25019  });20  21  return <button ref={buttonRef}>Click Me</button>22}
Edit Post

Bug?Edit Post