Skip to content

Commit b0cdd1c

Browse files
committed
docs(use-double-tap): Add proper README.md and LICENSE.md files
1 parent 21a262d commit b0cdd1c

File tree

2 files changed

+113
-4
lines changed

2 files changed

+113
-4
lines changed

packages/use-double-tap/LICENSE.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019-present Krzysztof Kalkhoff
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

packages/use-double-tap/README.md

+92-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,95 @@
1-
# use-double-tap
1+
# :point_up_2: React Double Tap Hook :point_up_2:
22

3-
This library was generated with [Nx](https://nx.dev).
3+
> React hook for handling double tap on mobile devices
44
5-
## Running unit tests
5+
![Travis (.org)](https://img.shields.io/travis/minwork/use-double-tap)
6+
![Codecov](https://img.shields.io/codecov/c/gh/minwork/use-double-tap)
7+
![npm type definitions](https://img.shields.io/npm/types/use-double-tap)
8+
![npm bundle size](https://img.shields.io/bundlephobia/min/use-double-tap)
9+
![npm](https://img.shields.io/npm/v/use-double-tap)
10+
![GitHub](https://img.shields.io/github/license/minwork/use-double-tap)
11+
## Install
612

7-
Run `nx test use-double-tap` to execute the unit tests via [Vitest](https://vitest.dev/).
13+
```bash
14+
npm install --save use-double-tap
15+
```
16+
or
17+
```bash
18+
yarn add use-double-tap
19+
```
20+
21+
## Basic Usage
22+
23+
```javascript
24+
import React from 'react';
25+
26+
import { useDoubleTap } from 'use-double-tap';
27+
28+
const Example = () => {
29+
const bind = useDoubleTap((event) => {
30+
// Your action here
31+
console.log('Double tapped');
32+
});
33+
34+
return <button {...bind}>Tap me</button>;
35+
}
36+
37+
export default Example;
38+
```
39+
40+
**[Live demo](https://codesandbox.io/s/usedoubletap-d2exl)**
41+
42+
## Advanced usage
43+
### Custom capture threshold
44+
You can also manually specify time threshold for capturing double tap event (default: 300ms).
45+
```javascript
46+
useDoubleTap(() => {
47+
// Your action here
48+
}, 500);
49+
```
50+
In the example above, second tap must occur within 500ms period to register double tap.
51+
52+
### Additional options
53+
Supplied as third argument.
54+
```typescript
55+
useDoubleTap(() => {
56+
// Actions on double tap
57+
}, 300, {
58+
// Options here
59+
})
60+
```
61+
62+
List of possible options:
63+
64+
| Option | Type | Description |
65+
| ------------- |:---------------:| -----|
66+
| 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. |
67+
68+
### Disable event binding
69+
If you pass falsy value as callback (like `null`) double tap will not bind to the component.
70+
```javascript
71+
useDoubleTap(null);
72+
```
73+
This allows you to dynamically control if event should be bound. For example:
74+
75+
```javascript
76+
const bind = useDoubleTap(isMobile ? () => {
77+
console.log('Double tapped');
78+
} : null);
79+
```
80+
81+
## :warning: Warning
82+
This hook internally use `onClick` event to detect double tap, so be careful not to override your existing event listener.
83+
84+
This is where disabling listener binding may come handy - you can use double tap detection only when necessary.
85+
86+
## Why `onClick`?
87+
Because it leverages built in event listener which can also detect mobile tap event.
88+
89+
This way we can get rid of complicated edge cases when combining `onTouchStart onTouchEnd onTouchCancel onTouchMove` events.
90+
91+
Also this approach greatly reduce package size as well as increase speed and flexibility.
92+
93+
## License
94+
95+
MIT © [minwork](https://github.com/minwork)

0 commit comments

Comments
 (0)