react-taptap v1.0.1

:point_up_2: React Double Tap Hook :point_up_2:

React hook for handling double tap on mobile devices

Install

npm install --save react-taptap

or

yarn add react-taptap

Basic Usage

import React from 'react';

import { useDoubleTap } from 'react-taptap';

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

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

export default Example;

Advanced usage

Custom capture threshold

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

useDoubleTap(() => {
    // action
}, 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 passed 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: Warning

This hook uses the onClick event to detect double tap, so be sure not to override an existing event listener.

License

MIT © mytchmason