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;