Skip to content

Commit

Permalink
add onTap details to readme and migration doc
Browse files Browse the repository at this point in the history
  • Loading branch information
Urmit Patel committed Aug 25, 2020
1 parent 17688e5 commit cbd28ee
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 13 deletions.
32 changes: 21 additions & 11 deletions README.md
@@ -1,5 +1,4 @@
React Swipeable
=========================
# React Swipeable

React swipe event handler hook

Expand All @@ -12,11 +11,17 @@ React swipe event handler hook
[Github Pages Demo](http://stack.formidable.com/react-swipeable/)

### Api

Use the hook and set your swipe(d) handlers.

```jsx
const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config })
return (<div {...handlers}> You can swipe here </div>)
const handlers = useSwipeable({
onSwiped: (eventData) => eventHandler,
...config,
});
return <div {...handlers}> You can swipe here </div>;
```

Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).

## Props / Config Options
Expand All @@ -31,11 +36,14 @@ Spread `handlers` onto the element you wish to track swipes inside of. [Details
onSwipedUp, // Fired after UP swipe
onSwipedDown, // Fired after DOWN swipe
onSwiping, // Fired during any swipe
onTap, // Fired after a tap
}
```

### Event data

All Event Handlers are called with the below event data.

```
{
event, // source event
Expand Down Expand Up @@ -65,6 +73,7 @@ All Event Handlers are called with the below event data.
**None of the props/config options are required.**

### Hook details

- Hook use requires **react >= 16.8.0**
- The props contained in `handlers` are currently `ref` and `onMouseDown`
- Please spread `handlers` as the props contained in it could change as react improves event listening capabilities
Expand All @@ -73,16 +82,17 @@ All Event Handlers are called with the below event data.
### preventDefaultTouchmoveEvent Details

**`preventDefaultTouchmoveEvent`** prevents the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event. Use this to stop the browser from scrolling while a user swipes.
* `e.preventDefault()` is only called when:
* `preventDefaultTouchmoveEvent: true`
* `trackTouch: true`
* the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop

- `e.preventDefault()` is only called when:
- `preventDefaultTouchmoveEvent: true`
- `trackTouch: true`
- the users current swipe has an associated `onSwiping` or `onSwiped` handler/prop

Example:
* If a user is swiping right with `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called.

Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`.
- If a user is swiping right with `<Swipable onSwipedRight={this.userSwipedRight} preventDefaultTouchmoveEvent={true} >` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called.

Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`.

### passive listener issue

Expand All @@ -106,7 +116,7 @@ Initial set up, with `node 10+`, run `npm install`.

Make changes/updates to the `src/index.js` file.

***Please add tests if PR adds/changes functionality.***
**_Please add tests if PR adds/changes functionality._**

#### Verify updates with the examples

Expand Down
6 changes: 4 additions & 2 deletions migration.md
@@ -1,8 +1,10 @@
React Swipeable v6 changes and migration
=========================
# React Swipeable v6 changes and migration

## Major Changes

- removal of `<Swipeable>` component
- _TODO_ add example for creating one and migrating

## Migrate Swipeable v5 to v6

- addition of `onTap` event handler prop which executes the callback after a tap

0 comments on commit cbd28ee

Please sign in to comment.