Skip to content

Commit

Permalink
docs(use-double-tap): Move documentation to gitbook
Browse files Browse the repository at this point in the history
  • Loading branch information
minwork committed Aug 27, 2023
1 parent 35e0a2d commit b67574e
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 72 deletions.
83 changes: 12 additions & 71 deletions packages/use-double-tap/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@
![npm bundle size](https://img.shields.io/bundlephobia/min/use-double-tap)
![npm](https://img.shields.io/npm/v/use-double-tap)
![GitHub](https://img.shields.io/github/license/minwork/react)
## Install

# Main features
- Detect double tap on mobile devices
- Adjustable detection threshold
- Callback for single tap

# Install

```bash
npm install --save use-double-tap
Expand All @@ -16,79 +22,14 @@ or
```bash
yarn add use-double-tap
```
# Documentation

## Basic Usage

```javascript
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](https://codesandbox.io/s/usedoubletap-d2exl)**

## Advanced usage
### Custom capture threshold
You can also manually specify time threshold for capturing double tap event (default: 300ms).
```javascript
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.
```typescript
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,<br> because of capture timeout.<br><br>For example if `threshold` parameter is *300ms* and second tap occurs after *400ms*<br> 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.
```javascript
useDoubleTap(null);
```
This allows you to dynamically control if event should be bound. For example:

```javascript
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.
Full documentation can be found [here](https://minwork.gitbook.io/long-press-hook/)

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

Also this approach greatly reduce package size as well as increase speed and flexibility.
If you like my work, consider making a [donation](https://github.com/sponsors/minwork) through Github Sponsors.

## License
# License

MIT © [minwork](https://github.com/minwork)
2 changes: 1 addition & 1 deletion packages/use-double-tap/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
],
"repository": "https://github.com/minwork/react",
"readme": "https://github.com/minwork/react/blob/main/packages/use-double-tap/README.md",
"homepage": "https://github.com/minwork/react/blob/main/packages/use-double-tap/README.md",
"homepage": "https://minwork.gitbook.io/double-tap-hook/",
"main": "./index.js",
"types": "./index.d.ts",
"exports": {
Expand Down

0 comments on commit b67574e

Please sign in to comment.