react-swipeable - npm Package Compare versions

Comparing version 6.0.0-alpha.1 to 6.0.0-alpha.2

CHANGELOG.md

@@ -7,3 +7,3 @@ # v6.0.0
   - more details in [readme#passive-listener-issue](https://github.com/FormidableLabs/react-swipeable#passive-listener-issue)
-- addition of `onTap` event handler prop which executes its callback after a tap
+- add new `onTap` event handler prop which executes its callback after a tap
   - Thank you [@upatel32](https://github.com/upatel32)!
@@ -24,3 +24,3 @@ - add new `vxvy` event data property
   - using `addEventListener` options object needs to be polyfilled, [browser support](https://github.com/FormidableLabs/react-swipeable#browser-support)
-- **requires** react >= 16.8.0
+- **requires** react >= 16.8.3, additionally supports new react v17
 
@@ -39,2 +39,5 @@ **Bug fixes:**
 
+**Maintenance:**
+- Upgraded all dev dependencies, `jest`, `babel`, `webpack`, `eslint`, `prettier`
+
 # 5.5.0
@@ -41,0 +44,0 @@ * Add `first` property to `eventData` that is `true` for first swipe event [issue #160](https://github.com/formidablelabs/react-swipeable/issues/160) and [PR #162](https://github.com/formidablelabs/react-swipeable/pull/162)

dist/types.d.ts

@@ -1,2 +0,2 @@
-/// <reference types="react" />
+import * as React from "react";
 export declare const LEFT = "Left";
@@ -3,0 +3,0 @@ export declare const RIGHT = "Right";

package.json

 {
   "name": "react-swipeable",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.2",
   "description": "React Swipe event handler hook",
@@ -89,4 +89,4 @@ "main": "./dist/react-swipeable.js",
     "prettier": "^2.0.5",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-scroll-up": "^1.3.3",
@@ -106,4 +106,4 @@ "rimraf": "^2.6.1",
   "peerDependencies": {
-    "react": ">= 16.8.0"
+    "react": "^16.8.3 || ^17"
   }
 }

README.md

@@ -85,2 +85,3 @@ # React Swipeable
 Use this to **stop scrolling** in the browser while a user swipes.
+- You can additionally try `touch-action` css property, [see below]
 
@@ -98,3 +99,3 @@ - `e.preventDefault()` is only called when:
 
-#### passive listener issue
+#### passive listener
 
@@ -107,8 +108,12 @@ With v6 we've added the passive event listener option by default, setting to it to `false` only when `preventDefaultTouchmoveEvent` is `true.
 
+React's long running passive [event issue](https://github.com/facebook/react/issues/6436).
+
 ### Browser Support
 
-With the release of v6 `react-swipeable` only supports browsers that support options object for `addEventListener`, [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility). Which mainly means `react-swipeable` does not support ie11 by default, you need to polyfill options. For example using [event-listener-with-options](https://github.com/Macil/event-listener-with-options).
+The release of v6 `react-swipeable` we only support browsers that support options object for `addEventListener`, [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Browser_compatibility). Which mainly means `react-swipeable` does not support ie11 by default, you need to polyfill options. For example using [event-listener-with-options](https://github.com/Macil/event-listener-with-options).
 
 ### Version 6 Updates and migration
 
+[v6 migration doc](./migration.md#swipeable-component-examples)
+
 v6 now only exports a hook, `useSwipeable`.
@@ -133,6 +138,47 @@
 
-## Development
+#### How to use & share `ref` from `useSwipeable?
 
-Initial set up, with **node 10+** & **yarn v1**, run `yarn`.
+More details in [issue 189](https://github.com/FormidableLabs/react-swipeable/issues/189#issuecomment-656302682).
 
+**Example ref passthrough:**
+```js
+const MyComponent = () => {
+  const handlers = useSwipeable({ onSwiped: () => console.log('swiped') })
+
+  // setup ref for your usage
+  const myRef = React.useRef();
+
+  const refPassthrough = (el) => {
+    // call useSwipeable ref prop with el
+    handlers.ref(el);
+
+    // set myRef el so you can access it yourself
+    myRef.current = el;
+  }
+
+  return (<div {...handlers} ref={refPassthrough} />
+}
+```
+
+#### `touch-action` and preventing 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.
+
+`touch-action` is a CSS property that sets how an element's region can be manipulated by a touchscreen user.
+
+```js
+const handlers = useSwipeable({
+  onSwiped: (eventData) => console.log("User Swiped!", evenData),
+  ...config,
+});
+return <div {...handlers} style={{ touchAction: 'pan-y' }}> Swipe here </div>;
+```
+This explanation and example borrowed from `use-gesture`'s [wonderful docs here](https://use-gesture.netlify.app/docs/extras/#touch-action).
+
+## Local Development
+
+Initial install & setup, with **node 10+** & **yarn v1**, run `yarn`.
+
 Make changes/updates to the `src/index.ts` file.
@@ -139,0 +185,0 @@

src/types.ts

@@ -0,1 +1,3 @@
+import * as React from "react";
+
 export const LEFT = "Left";
@@ -2,0 +4,0 @@ export const RIGHT = "Right";

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

149693

increased by1.35%

Lines of code

1407

increased by0.07%

Number of lines in readme file

196

increased by30.67%

No dependency changes