👆 React Double Tap Hook 👆

React hook for handling double tap on mobile devices

Install

npm install --save use-double-tap

or

yarn add use-double-tap

Basic Usage

import React from 'react';

import { useDoubleTap } from 'use-double-tap';

const Example = () => {
    const bind = useDoubleTap((event) => {
      // Your action here
      console.log('Double tapped');
    });

    return <button {...bind}>Tap me</button>;
}

export default Example;

Live demo

Advanced usage

Custom capture threshold

You can also manually specify time threshold for capturing double tap event (default: 300ms).

useDoubleTap(() => {
  // Your action here
}, 500);

In the example above, second tap must occur within 500ms period to register double tap.

Additional options

Supplied as third argument.

useDoubleTap(() => {
  // Actions on double tap
}, 300, {
  // Options here
})

List of possible options:

Disable event binding

If you pass falsy value as callback (like null) double tap will not bind to the component.

useDoubleTap(null);

This allows you to dynamically control if event should be bound. For example:

const bind = useDoubleTap(isMobile ? () => {
  console.log('Double tapped');
} : null);

⚠️ Warning

This hook internally use onClick event to detect double tap, so be careful not to override your existing event listener.

This is where disabling listener binding may come handy - you can use double tap detection only when necessary.

Why onClick?

Because it leverages built in event listener which can also detect mobile tap event.

This way we can get rid of complicated edge cases when combining onTouchStart onTouchEnd onTouchCancel onTouchMove events.

Also this approach greatly reduce package size as well as increase speed and flexibility.

License

MIT © minwork