react-swipeable - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CHANGELOG.md

 # 3.4.0
 
+* Add configurable container element via `nodeName` prop, defaults to `'div'`. See [#24](https://github.com/dogfessional/react-swipeable/issues/24) and [#40](https://github.com/dogfessional/react-swipeable/pull/40) for more info.
+
+# 3.4.0
+
 * Add preventDefault while swiping when props `onSwipedLeft`, `onSwipedRight`, `onSwipedUp`, and `onSwipedDown` are present. See #21 and #37 for more info.
@@ -4,0 +8,0 @@

lib/Swipeable.js

@@ -23,3 +23,4 @@ 'use strict';
     delta: React.PropTypes.number,
-    preventDefaultTouchmoveEvent: React.PropTypes.bool
+    preventDefaultTouchmoveEvent: React.PropTypes.bool,
+    nodeName: React.PropTypes.string
   },
@@ -40,3 +41,4 @@
       delta: 10,
-      preventDefaultTouchmoveEvent: true
+      preventDefaultTouchmoveEvent: true,
+      nodeName: 'div'
     };
@@ -155,10 +157,7 @@ },
   render: function render() {
-    return React.createElement(
-      'div',
-      _extends({}, this.props, {
-        onTouchStart: this.touchStart,
-        onTouchMove: this.touchMove,
-        onTouchEnd: this.touchEnd }),
-      this.props.children
-    );
+    return React.createElement(this.props.nodeName, _extends({}, this.props, {
+      onTouchStart: this.touchStart,
+      onTouchMove: this.touchMove,
+      onTouchEnd: this.touchEnd
+    }), this.props.children);
   }
@@ -165,0 +164,0 @@ });

package.json

 {
   "name": "react-swipeable",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Swipe bindings for react",
@@ -34,2 +34,3 @@ "main": "lib/Swipeable.js",
     "babel-cli": "^6.3.17",
+    "babel-plugin-transform-object-rest-spread": "^6.3.13",
     "babel-preset-es2015-loose": "^6.1.4",
@@ -36,0 +37,0 @@ "babel-preset-react": "^6.3.13",

README.md

@@ -1,8 +0,9 @@
-# Swipeable 
+# Swipeable [![npm version](https://img.shields.io/npm/v/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable) [![npm downloads](https://img.shields.io/npm/dm/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable)
+Swipe bindings for react.
 [http://dogfessional.github.io/react-swipeable/](http://dogfessional.github.io/react-swipeable/)
 
 ### Install
-
+Using npm:
 ```console
-$ npm install react-swipeable
+$ npm install --save react-swipeable
 ```
@@ -12,2 +13,4 @@
 
+react-swipeable generates a React component (defaults to `<div>`) and binds touch events to it.
+
 ```js
@@ -29,7 +32,4 @@ var Swipeable = require('react-swipeable')
         onSwipedLeft={this.swipedLeft}
-        onSwiped={this.handleSwipeAction}
-        preventDefaultTouchmoveEvent={false}>
-        <div>
-          This element can be swiped
-        </div>
+        onSwiped={this.handleSwipeAction}>
+          You can be swipe here!
       </Swipeable>
@@ -41,21 +41,25 @@ )
 
-## Props
+## Event Props
 
-**None of the props are required.**
-`onSwiping`, `onSwipingUp`, `onSwipingRight`, `onSwipingDown`, `onSwipingLeft`, calls back with the event
+**`onSwiping`**, **`onSwipingUp`**, **`onSwipingRight`**, **`onSwipingDown`**, **`onSwipingLeft`**, are called with the event
 as well as the absolute delta of where the swipe started and where it's currently at. These constantly fire throughout touch events.
 
-`onSwiping` in addition to the swipe delta, onSwiping also returns the current absolute X and Y position, as well as the current Velocity of the swipe. `this.props.onSwiping(e, deltaX, deltaY, absX, absY, velocity)`
+**`onSwiping`** in addition to the swipe delta, `onSwiping` also returns the current absolute X and Y position, as well as the current Velocity of the swipe. `this.props.onSwiping(e, deltaX, deltaY, absX, absY, velocity)`
 
-`onSwipedUp`, `onSwipedRight`, `onSwipedDown`, `onSwipedLeft` calls back with the event
+**`onSwipedUp`**, **`onSwipedRight`**, **`onSwipedDown`**, **`onSwipedLeft`** are called with the event
 as well as the x distance, + or -, from where the swipe started to where it ended. These only fire at the end of a touch event.
 
-`onSwiped` calls back with the event, the X and Y delta, and whether or not the event was a flick `this.props.onSwiped(ev, x, y, isFlick)`
+**`onSwiped`** is called with the event, the X and Y delta, and whether or not the event was a flick `this.props.onSwiped(ev, x, y, isFlick)`
 
-`flickThreshold` is a number (float) which determines the max velocity of a swipe before it's considered a flick.
+#####Configuration Props
 
-`delta` is the amount of px before we start firing events. Also effects how far `onSwipedUp`, `onSwipedRight`, `onSwipedDown`, and `onSwipedLeft` need to be before they fire events. The default value is 10.
+**`flickThreshold`** is a number (float) which determines the max velocity of a swipe before it's considered a flick. The default value is `0.6`.
 
-`preventDefaultTouchmoveEvent` is whether to prevent the browser's `[touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove)` event.  Sometimes you would like the target to scroll natively.  The default value is `true`.
+**`delta`** is the amount of px before we start firing events. Also effects how far `onSwipedUp`, `onSwipedRight`, `onSwipedDown`, and `onSwipedLeft` need to be before they fire events. The default value is `10`.
 
+**`preventDefaultTouchmoveEvent`** is whether to prevent the browser's [touchmove](https://developer.mozilla.org/en-US/docs/Web/Events/touchmove) event.  Sometimes you would like the target to scroll natively.  The default value is `true`.
+
+**`nodeName`** is a string which determines the html element/node that this react component binds its touch events to then returns. The default value is `'div'`.
+
+**None of the props are required.**
 ### PropTypes
@@ -77,2 +81,3 @@
   preventDefaultTouchmoveEvent: React.PropTypes.bool
+  nodeName: React.PropTypes.string
 ```
@@ -79,0 +84,0 @@

src/Swipeable.js

@@ -17,3 +17,4 @@ const React = require('react')
     delta: React.PropTypes.number,
-    preventDefaultTouchmoveEvent: React.PropTypes.bool
+    preventDefaultTouchmoveEvent: React.PropTypes.bool,
+    nodeName: React.PropTypes.string
   },
@@ -34,3 +35,4 @@
       delta: 10,
-      preventDefaultTouchmoveEvent: true
+      preventDefaultTouchmoveEvent: true,
+      nodeName: 'div'
     }
@@ -154,10 +156,12 @@ },
   render: function () {
-    return (
-      <div {...this.props}
-        onTouchStart={this.touchStart}
-        onTouchMove={this.touchMove}
-        onTouchEnd={this.touchEnd} >
-          {this.props.children}
-      </div>
-    )
+    return React.createElement(
+      this.props.nodeName,
+      {
+        ...this.props,
+        onTouchStart: this.touchStart,
+        onTouchMove: this.touchMove,
+        onTouchEnd: this.touchEnd,
+      },
+      this.props.children
+    );
   }
@@ -164,0 +168,0 @@ })

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

15798

increased by7.43%

Lines of code

280

increased by1.08%

Number of lines in readme file

96

increased by5.49%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes