add nodeName prop to configure container

Author: Brian Hartz

.babelrc

@@ -1,3 +1,4 @@
 {
+  "plugins": ["transform-object-rest-spread"],
   "presets": ["es2015-loose", "react"]
 }

README.md

@@ -10,6 +10,8 @@ $ npm install --save react-swipeable
 
 ### Use
 
+react-swipeable generates a React component (defaults to `<div>`) and binds touch events to it.
+
 ```js
 var Swipeable = require('react-swipeable')
 
@@ -27,16 +29,14 @@ var SampleComponent = React.createClass({
         onSwipedDown={this.swipedDown}
         onSwipedLeft={this.swipedLeft}
         onSwiped={this.handleSwipeAction}>
-        <div>
-          This element can be swiped
-        </div>
+          You can be swipe here!
       </Swipeable>
     )
   }
 })
 ```
 
-## Props
+## Event Props
 
 **`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.
@@ -50,12 +50,14 @@ as well as the x distance, + or -, from where the swipe started to where it ende
 
 #####Configuration Props
 
-**`flickThreshold`** is a number (float) which determines the max velocity of a swipe before it's considered a flick.
+**`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`.
 
-**`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.
+**`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
 
@@ -73,6 +75,7 @@ as well as the x distance, + or -, from where the swipe started to where it ende
   flickThreshold: React.PropTypes.number,
   delta: React.PropTypes.number,
   preventDefaultTouchmoveEvent: React.PropTypes.bool
+  nodeName: React.PropTypes.string
 ```
 
 ## Development

examples/app/Main.js

@@ -7,12 +7,13 @@ const initialState = {
   swiping: false,
   swiped: false,
   swipingDirection: '',
-  swipedDirection: ''
+  swipedDirection: '',
 };
 const initialStateSwipeable = {
   flickThreshold: '0.6',
   delta: '10',
-  preventDefaultTouchmoveEvent: true
+  preventDefaultTouchmoveEvent: true,
+  nodeName: 'div',
 };
 const initialStateApplied = {
   onSwipingApplied: true,
@@ -103,6 +104,7 @@ export default class Main extends Component {
       onSwipingApplied,
       onSwipedApplied,
       preventDefaultTouchmoveEvent,
+      nodeName,
     } = this.state;
 
     const isFlickThresholdNumber = !(isNaN(flickThreshold) || flickThreshold === '');
@@ -127,14 +129,15 @@ export default class Main extends Component {
             {...swipeableDirProps}
             flickThreshold={flickThresholdNum}
             delta={deltaNum}
-            preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}>
-            <div className="callout"
-              onTouchStart={()=>this.resetState()}
-              style={{fontSize: "0.75rem"}}>
-              <h5>Swipe inside here to test...</h5>
-              <p>See output below and check the console for 'onSwiping' and 'onSwiped' callback output</p>
-              <span>You can also 'toggle' the swip(ed/ing) props being applied to this container below.</span>
-            </div>
+            preventDefaultTouchmoveEvent={preventDefaultTouchmoveEvent}
+            nodeName={nodeName}
+            className="callout"
+            style={{fontSize: "0.75rem"}}>
+              <div onTouchStart={()=>this.resetState()}>
+                <h5>Swipe inside here to test...</h5>
+                <p>See output below and check the console for 'onSwiping' and 'onSwiped' callback output</p>
+                <span>You can also 'toggle' the swip(ed/ing) props being applied to this container below.</span>
+              </div>
           </Swipeable>
           <table>
             <thead>
@@ -156,11 +159,11 @@ export default class Main extends Component {
                 <td>onSwiped</td><td>{swiped ? 'True' : 'False'}</td>
               </tr>
               <tr>
-                <td className="text-center"><a href="#appliedDirs">Below</a></td>
+                <td className="text-center"><a href="#appliedDirs">↓&nbsp;Below&nbsp;↓</a></td>
                 <td>onSwiping[Direction]</td><td>{swipingDirection}</td>
               </tr>
               <tr>
-                <td className="text-center"><a href="#appliedDirs">Below</a></td>
+                <td className="text-center"><a href="#appliedDirs">↓&nbsp;Below&nbsp;↓</a></td>
                 <td>onSwiped[Direction]</td><td>{swipedDirection}</td>
               </tr>
               <tr>
@@ -188,9 +191,22 @@ export default class Main extends Component {
                     onChange={(e)=>this.updateValue('preventDefaultTouchmoveEvent', e.target.checked)}/>
                 </td>
               </tr>
+              <tr>
+                <td className="text-center">nodeName:</td>
+                <td colSpan="2" className="text-center">
+                    <button type="button" className={`button${nodeName!=='div'?' secondary':''}`}
+                      style={{margin: '.5rem'}}
+                      onClick={()=>this.updateValue('nodeName', 'div')}>{`'div'`}</button>
+                    <button type="button" className={`button${nodeName!=='span'?' secondary':''}`}
+                      style={{margin: '.5rem'}}
+                      onClick={()=>this.updateValue('nodeName', 'span')}>{`'span'`}</button>
+                    <button type="button" className={`button${nodeName!=='li'?' secondary':''}`}
+                      style={{margin: '.5rem'}}
+                      onClick={()=>this.updateValue('nodeName', 'li')}>{`'li'`}</button>
+                </td>
+              </tr>
             </tbody>
           </table>
-          <button type="button" className="tiny button expanded" onClick={()=>this.resetState(true)}>Reset All Options</button>
           <table id="appliedDirs">
             <thead>
               <tr><th colSpan="2" className="text-center" style={{borderRight: "1px solid #cccccc"}}>onSwiping</th><th colSpan="2" className="text-center">onSwiped</th></tr>
@@ -200,7 +216,8 @@ export default class Main extends Component {
               {DIRECTIONS.map(this._renderAppliedDirRow.bind(this))}
             </tbody>
           </table>
-          <p style={{"margin-bottom": "5rem"}}>
+          <button type="button" className="tiny button expanded" onClick={()=>this.resetState(true)}>Reset All Options</button>
+          <p style={{"marginBottom": "5rem"}}>
             Thanks for checking out the example app! Let us know if you find any bugs, and&nbsp;
             <a href="https://github.com/dogfessional/react-swipeable/pulls">submit a PR!</a>
           </p>

package.json

@@ -31,6 +31,7 @@
   "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.3.17",
+    "babel-plugin-transform-object-rest-spread": "^6.3.13",
     "babel-preset-es2015-loose": "^6.1.4",
     "babel-preset-react": "^6.3.13",
     "react": ">=0.12.x"

src/Swipeable.js

@@ -14,7 +14,8 @@ const Swipeable = React.createClass({
     onSwipedLeft: React.PropTypes.func,
     flickThreshold: React.PropTypes.number,
     delta: React.PropTypes.number,
-    preventDefaultTouchmoveEvent: React.PropTypes.bool
+    preventDefaultTouchmoveEvent: React.PropTypes.bool,
+    nodeName: React.PropTypes.string
   },
 
   getInitialState: function () {
@@ -30,7 +31,8 @@ const Swipeable = React.createClass({
     return {
       flickThreshold: 0.6,
       delta: 10,
-      preventDefaultTouchmoveEvent: true
+      preventDefaultTouchmoveEvent: true,
+      nodeName: 'div'
     }
   },
 
@@ -149,14 +151,16 @@ const Swipeable = React.createClass({
   },
 
   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
+    );
   }
 })