diff --git a/README.md b/README.md
index fccb81f2..5063f905 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
-React Swipeable
-=========================
+# React Swipeable
React swipe event handler hook
@@ -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 (
You can swipe here
)
+const handlers = useSwipeable({
+ onSwiped: (eventData) => eventHandler,
+ ...config,
+});
+return You can swipe here
;
```
+
Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).
## Props / Config Options
@@ -35,14 +40,16 @@ Spread `handlers` onto the element you wish to track swipes inside of. [Details
```
### Event data
+
All Event Handlers are called with the below event data.
+
```
{
event, // source event
initial, // initial swipe [x,y]
first, // true for first event
- deltaX, // x offset (initial.x - current.x)
- deltaY, // y offset (initial.y - current.y)
+ deltaX, // x offset (current.x - initial.x)
+ deltaY, // y offset (current.y - initial.y)
absX, // absolute deltaX
absY, // absolute deltaY
velocity, // √(absX^2 + absY^2) / time
@@ -65,6 +72,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
@@ -73,16 +81,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 `` 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 `` 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
@@ -106,7 +115,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
diff --git a/__tests__/__snapshots__/useSwipeable.spec.tsx.snap b/__tests__/__snapshots__/useSwipeable.spec.tsx.snap
index 318a98c6..70b13b87 100644
--- a/__tests__/__snapshots__/useSwipeable.spec.tsx.snap
+++ b/__tests__/__snapshots__/useSwipeable.spec.tsx.snap
@@ -4,7 +4,7 @@ exports[`useSwipeable handles mouse events with trackMouse prop and fires correc
Object {
"absX": 100,
"absY": 0,
- "deltaX": -100,
+ "deltaX": 100,
"deltaY": 0,
"dir": "Right",
"event": MouseEvent {
@@ -23,7 +23,7 @@ exports[`useSwipeable handles mouse events with trackMouse prop and fires correc
Object {
"absX": 25,
"absY": 0,
- "deltaX": -25,
+ "deltaX": 25,
"deltaY": 0,
"dir": "Right",
"event": MouseEvent {
@@ -43,7 +43,7 @@ Object {
"absX": 0,
"absY": 100,
"deltaX": 0,
- "deltaY": -100,
+ "deltaY": 100,
"dir": "Down",
"event": TouchEvent {
"isTrusted": false,
@@ -62,7 +62,7 @@ Object {
"absX": 0,
"absY": 25,
"deltaX": 0,
- "deltaY": -25,
+ "deltaY": 25,
"dir": "Down",
"event": TouchEvent {
"isTrusted": false,
diff --git a/migration.md b/migration.md
index c5c35c39..c406c4c2 100644
--- a/migration.md
+++ b/migration.md
@@ -1,8 +1,10 @@
-React Swipeable v6 changes and migration
-=========================
+# React Swipeable v6 changes and migration
## Major Changes
+
- removal of `` component
- _TODO_ add example for creating one and migrating
+- update calculation of `deltaX` and `deltaY` from `initial - current` to `current - initial`
+ - Example: `const deltaX = state.xy[0] - x;` is now `const deltaX = x - state.xy[0];`
## Migrate Swipeable v5 to v6
diff --git a/src/index.ts b/src/index.ts
index f7a67baa..ad9ba95c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -110,13 +110,13 @@ function getDirection(
) {
if (absX > absY) {
if (deltaX > 0) {
- return LEFT;
+ return RIGHT;
}
- return RIGHT;
+ return LEFT;
} else if (deltaY > 0) {
- return UP;
+ return DOWN;
}
- return DOWN;
+ return UP;
}
function rotateXYByAngle(pos: Vector2, angle: number): Vector2 {
@@ -176,8 +176,8 @@ function getHandlers(
const { clientX, clientY } =
"touches" in event ? event.touches[0] : event;
const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
- const deltaX = state.xy[0] - x;
- const deltaY = state.xy[1] - y;
+ const deltaX = x - state.xy[0];
+ const deltaY = y - state.xy[1];
const absX = Math.abs(deltaX);
const absY = Math.abs(deltaY);
const time = (event.timeStamp || 0) - state.start;