use-double-tap v1.3.6
:point_up_2: React Double Tap Hook :point_up_2:
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;
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:
Option | Type | Description |
---|---|---|
onSingleTap | Function | Callback for handling case when double tap is not triggered, because of capture timeout.For example if threshold parameter is 300ms and second tap occurs after 400ms then onSingleTap is triggered after capture interval (300ms) expires. |
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: 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
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
8 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
2 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago