https://github.com/tim-soft/use-double-click

:mouse2: A simple React hook for differentiating single and double clicks on the same component.
https://github.com/tim-soft/use-double-click

double-click doubleclick hook ondblclick react

Last synced: 10 months ago
JSON representation

:mouse2: A simple React hook for differentiating single and double clicks on the same component.

• Host: GitHub
• URL: https://github.com/tim-soft/use-double-click
• Owner: tim-soft
• License: mit
• Created: 2019-08-05T20:23:35.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-22T09:00:51.000Z (about 2 years ago)
• Last Synced: 2025-07-22T19:47:12.871Z (11 months ago)
• Topics: double-click, doubleclick, hook, ondblclick, react
• Language: JavaScript
• Homepage: https://timellenberger.com/libraries/use-double-click
• Size: 1.2 MB
• Stars: 64
• Watchers: 1
• Forks: 4
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-double-click

[![npm](https://img.shields.io/npm/v/use-double-click.svg?color=brightgreen&style=popout-square)](https://www.npmjs.com/package/use-double-click)

[![NPM](https://img.shields.io/github/license/tim-soft/use-double-click?color=brightgreen&style=popout-square)](https://github.com/tim-soft/use-double-click/blob/master/LICENSE)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-double-click.svg?style=popout-square)

![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=popout-square)

[![Codecov](https://img.shields.io/codecov/c/github/tim-soft/use-double-click?style=flat-square)](https://codecov.io/gh/tim-soft/use-double-click)

[![Travis (.org)](https://img.shields.io/travis/tim-soft/use-double-click?style=flat-square)](https://travis-ci.org/tim-soft/use-double-click)

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

**Documentation** [https://timellenberger.com/libraries/use-double-click](https://timellenberger.com/libraries/use-double-click)

[Check out the demo on Codesandbox](https://codesandbox.io/s/use-double-click-f7e33?expanddevtools=1&fontsize=14)

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

```bash

yarn add use-double-click

```

## Usage

```jsx

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 Click Me

}

```

## 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](https://github.com/tim-soft)