Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-swipeable
Advanced tools
react-swipeable - npm Package Compare versions
Comparing version 6.0.0-alpha.2 to 6.0.0
| # v6.0.0 | ||
| **Features:** | ||
| **New Features:** | ||
| - include passive event listener option, by default, to internal uses of `addEventListener` | ||
| - solves issue with chrome and lighthouse - [#167](https://github.com/FormidableLabs/react-swipeable/issues/167) | ||
| - set `passive` to `false` only when `preventDefaultTouchmoveEvent` is `true`. | ||
| - more details in [readme#passive-listener-issue](https://github.com/FormidableLabs/react-swipeable#passive-listener-issue) | ||
| - more details in [readme#passive-listener-issue](https://github.com/FormidableLabs/react-swipeable#passive-listener) | ||
| - add new `onTap` event handler prop which executes its callback after a tap | ||
@@ -17,3 +17,3 @@ - Thank you [@upatel32](https://github.com/upatel32)! | ||
| - [Swipeable component examples](https://github.com/FormidableLabs/react-swipeable/blob/main/migration.md#swipeable-component-examples) | ||
| - **event data update** re-calculate `deltaX` and `deltaY` | ||
| - **event data update** correctly calculate `deltaX` and `deltaY` | ||
| - from `initial - current` **to** `current - initial` | ||
@@ -33,2 +33,7 @@ - fixes issue [#157](https://github.com/FormidableLabs/react-swipeable/issues/157) | ||
| - **typescript** Converted entire code base, tests, and examples to typescript | ||
| - **changed type** `EventData` -> `SwipeEventData` - The event data provided for all swipe event callbacks | ||
| - **removed type** `SwipeableOptions` - use `SwipeableProps` now | ||
| - **removed types** associated with `<Swipeable>` component | ||
| - **new type** `TapCallback` - callback for the new `onTap` prop handler | ||
| - **new type** `SwipeDirections` - `"Left" | "Right" | "Up" | "Down"` | ||
| - Converted tests to `@testing-library/react`, [react testing library](https://github.com/testing-library/react-testing-library) | ||
@@ -35,0 +40,0 @@ - Build bundles with `microbundle`. [microbundle](https://github.com/developit/microbundle) |
| { | ||
| "name": "react-swipeable", | ||
| "version": "6.0.0-alpha.2", | ||
| "version": "6.0.0", | ||
| "description": "React Swipe event handler hook", | ||
@@ -85,3 +85,3 @@ "main": "./dist/react-swipeable.js", | ||
| "eslint-plugin-react-hooks": "^4.0.5", | ||
| "gh-pages": "^1.0.0", | ||
| "gh-pages": "^3.0.0", | ||
| "jest": "^26.1.0", | ||
@@ -93,3 +93,3 @@ "microbundle": "^0.12.3", | ||
| "react-scroll-up": "^1.3.3", | ||
| "rimraf": "^2.6.1", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^1.1.2", | ||
@@ -96,0 +96,0 @@ "rollup-plugin-babel": "^4.3.2", |
@@ -7,5 +7,5 @@ # React Swipeable | ||
| [](https://codesandbox.io/s/lrk6955l79?module=%2Fsrc%2FCarousel.js) | ||
| [](https://codesandbox.io/s/react-swipeable-image-carousel-hben8?file=/src/Carousel.js) | ||
| [Github Pages Demo](http://stack.formidable.com/react-swipeable/) | ||
| [Github Pages Demo](http://formidablelabs.github.io/react-swipeable/) | ||
@@ -28,20 +28,32 @@ ### Api | ||
| ### Event Handler Props | ||
| ### Event handler props | ||
| ```js | ||
| { | ||
| onSwiped, // Fired after any swipe | ||
| onSwipedLeft, // Fired after LEFT swipe | ||
| onSwipedRight, // Fired after RIGHT swipe | ||
| onSwipedUp, // Fired after UP swipe | ||
| onSwipedDown, // Fired after DOWN swipe | ||
| onSwiping, // Fired during any swipe | ||
| onTap, // Fired after a tap | ||
| onSwiped, // After any swipe (SwipeEventData) => void | ||
| onSwipedLeft, // After LEFT swipe (SwipeEventData) => void | ||
| onSwipedRight, // After RIGHT swipe (SwipeEventData) => void | ||
| onSwipedUp, // After UP swipe (SwipeEventData) => void | ||
| onSwipedDown, // After DOWN swipe (SwipeEventData) => void | ||
| onSwiping, // During swiping (SwipeEventData) => void | ||
| onTap, // After a tap ({ event }) => void | ||
| } | ||
| ``` | ||
| ### Event data | ||
| ### Configuration props and default values | ||
| All Event Handlers are called with the below event data. | ||
| ```js | ||
| { | ||
| delta: 10, // min distance(px) before a swipe starts | ||
| preventDefaultTouchmoveEvent: false, // call e.preventDefault *See Details* | ||
| trackTouch: true, // track touch input | ||
| trackMouse: false, // track mouse input | ||
| rotationAngle: 0, // set a rotation angle | ||
| } | ||
| ``` | ||
| ## Swipe Event Data | ||
| All Event Handlers are called with the below event data, `SwipeEventData`. | ||
| ```js | ||
@@ -62,14 +74,2 @@ { | ||
| ### Configuration Props | ||
| ```js | ||
| { | ||
| delta: 10, // min distance(px) before a swipe starts | ||
| preventDefaultTouchmoveEvent: false, // preventDefault on touchmove, *See Details* | ||
| trackTouch: true, // track touch input | ||
| trackMouse: false, // track mouse input | ||
| rotationAngle: 0, // set a rotation angle | ||
| } | ||
| ``` | ||
| **None of the props/config options are required.** | ||
@@ -79,14 +79,14 @@ | ||
| - Hook use requires **react >= 16.8.0** | ||
| - Hook use requires **react >= 16.8.3** | ||
| - 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 | ||
| ### preventDefaultTouchmoveEvent Details | ||
| ### `preventDefaultTouchmoveEvent` details | ||
| **`preventDefaultTouchmoveEvent`** prevents the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event. | ||
| This prop allows you to prevent the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event default action, mostly "scrolling". | ||
| Use this to **stop scrolling** in the browser while a user swipes. | ||
| - You can additionally try `touch-action` css property, [see below] | ||
| - You can additionally try `touch-action` css property, [see below](#how-to-use-touch-action-to-prevent-scrolling) | ||
| - `e.preventDefault()` is only called when: | ||
| `e.preventDefault()` is only called when: | ||
| - `preventDefaultTouchmoveEvent: true` | ||
@@ -96,18 +96,18 @@ - `trackTouch: true` | ||
| Example: | ||
| Example scenario: | ||
| > If a user is swiping right with props `{ onSwipedRight: userSwipedRight, preventDefaultTouchmoveEvent: true }` then `e.preventDefault()` will be called, but if the user was swiping left then `e.preventDefault()` would **not** be called. | ||
| - 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 app](http://formidablelabs.github.io/react-swipeable/) to test `preventDefaultTouchmoveEvent`. | ||
| Please experiment with the [example](http://stack.formidable.com/react-swipeable/) to test `preventDefaultTouchmoveEvent`. | ||
| #### passive listener | ||
| With v6 we've added the passive event listener option, by default, to **internal uses** of `addEventListener`. We set the `passive` option to `false` only when `preventDefaultTouchmoveEvent` is `true`. | ||
| With v6 we've added the passive event listener option by default, setting to it to `false` only when `preventDefaultTouchmoveEvent` is `true. | ||
| **When `preventDefaultTouchmoveEvent` is:** | ||
| - `true` => `{ passive: false }` | ||
| - `false` => `{ passive: true }` | ||
| - `true` => `el.addEventListener(event, cb, { passive: false })` | ||
| - `false` => `el.addEventListener(event, cb, { passive: true })` | ||
| React's long running passive [event issue](https://github.com/facebook/react/issues/6436). | ||
| We previously had issues with chrome lighthouse performance deducting points for not having passive option set. | ||
| ### Browser Support | ||
@@ -119,3 +119,3 @@ | ||
| [v6 migration doc](./migration.md#swipeable-component-examples) | ||
| If upgrading from v5 or later please refer to the release notes and the [v6 migration doc](./migration.md) | ||
@@ -128,5 +128,4 @@ v6 now only exports a hook, `useSwipeable`. | ||
| #### How can I add a swipe listener to the `document`? | ||
| Example by @merrywhether | ||
| - https://github.com/FormidableLabs/react-swipeable/issues/180#issuecomment-649677983 | ||
| ### How can I add a swipe listener to the `document`? | ||
| Example by [@merrywhether #180](https://github.com/FormidableLabs/react-swipeable/issues/180#issuecomment-649677983) | ||
| ```js | ||
@@ -142,7 +141,5 @@ const { ref } = useSwipeable({ | ||
| #### How to use & share `ref` from `useSwipeable? | ||
| ### How to share `ref` from `useSwipeable`? | ||
| More details in [issue 189](https://github.com/FormidableLabs/react-swipeable/issues/189#issuecomment-656302682). | ||
| **Example ref passthrough:** | ||
| **Example ref passthrough, [more details #189](https://github.com/FormidableLabs/react-swipeable/issues/189#issuecomment-656302682):** | ||
| ```js | ||
@@ -167,7 +164,7 @@ const MyComponent = () => { | ||
| #### `touch-action` and preventing scrolling | ||
| ### How to use `touch-action` to prevent scrolling? | ||
| Sometimes you don't want the `body` of your page to scroll along with the user manipulating or swiping an item. | ||
| You might try to prevent the event default action via `preventDefaultTouchmoveEvent`, which calls `event.preventDefault()`. **But** there may be a simpler, more effective solution, which has to do with a simple CSS property. | ||
| You might try to prevent the event default action via [preventDefaultTouchmoveEvent](#preventdefaulttouchmoveevent-details), which calls `event.preventDefault()`. **But** there may be a simpler, more effective solution, which has to do with a simple CSS property. | ||
@@ -183,3 +180,3 @@ `touch-action` is a CSS property that sets how an element's region can be manipulated by a touchscreen user. | ||
| ``` | ||
| This explanation and example borrowed from `use-gesture`'s [wonderful docs here](https://use-gesture.netlify.app/docs/extras/#touch-action). | ||
| This explanation and example borrowed from `use-gesture`'s [wonderful docs](https://use-gesture.netlify.app/docs/extras/#touch-action). | ||
@@ -186,0 +183,0 @@ ## Local Development |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.62%
150628
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Number of lines in readme file
- decreased by-1.53%
193
No dependency changes