add comments, update readme

Author: hartzis

README.md

@@ -32,7 +32,7 @@ import { useSwipeable, Swipeable } from 'react-swipeable'
 const handlers = useSwipeable({ onSwiped: (eventData) => eventHandler, ...config })
 return (<div {...handlers}> You can swipe here </div>)
 ```
-Hook use requires **react >= 16.8.0**.
+Spread `handlers` onto the element you wish to track swipes inside of. [Details below](#hook-details).
 
 #### Component
 ```jsx
@@ -81,42 +81,39 @@ All Event Handlers are called with the below event data.
   trackTouch: true,                      // track touch input
   trackMouse: false,                     // track mouse input
   rotationAngle: 0,                      // set a rotation angle
-
-  touchHandlerOption: {         // overwrite touch handler 3rd argument
-    passive: true|false         // defaults opposite of preventDefaultTouchmoveEvent *See Details*
-  },
 }
 ```
 
 ### Component Specific Props
 
 ```
 {
-  nodeName: 'div',      // internal component dom node
-  innerRef              // access internal component dom node
+  nodeName: 'div',    // internally rendered component dom node
+  innerRef            // callback ref for internal component dom node
 }
 ```
 
 **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
+    - See [#127](https://github.com/dogfessional/react-swipeable/issues/127) for some more context
+
 ### 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
-* if `preventDefaultTouchmoveEvent: true` then `touchHandlerOption` defaults to `{ passive: false }`
-* if `preventDefaultTouchmoveEvent: false` then `touchHandlerOption` defaults to `{ passive: true }`
 
 Example:
    * 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](http://dogfessional.github.io/react-swipeable/) to test `preventDefaultTouchmoveEvent`.
 
-#### Older browser support
-If you need to support older browsers that do not have support for `{passive: false}` `addEventListener` 3rd argument, we recommend using [detect-passive-events](https://www.npmjs.com/package/detect-passive-events) package to determine the `touchHandlerOption` prop value.
-
 
 ## Development
 

src/index.js

@@ -51,6 +51,7 @@ function getHandlers(set, props) {
     if (event.touches && event.touches.length > 1) return
 
     set(state => {
+      // setup mouse listeners on document to track swipe since swipe can leave container
       if (state.props.trackMouse) {
         document.addEventListener(mouseMove, onMove)
         document.addEventListener(mouseUp, onUp)
@@ -112,13 +113,9 @@ function getHandlers(set, props) {
   }
 
   const stop = () => {
-    set(state => {
-      if (state.props.trackMouse) {
-        document.removeEventListener(mouseMove, onMove)
-        document.removeEventListener(mouseUp, onUp)
-      }
-      return state
-    })
+    // safe to just call removeEventListener
+    document.removeEventListener(mouseMove, onMove)
+    document.removeEventListener(mouseUp, onUp)
   }
 
   const onUp = e => {
@@ -135,15 +132,21 @@ function getHandlers(set, props) {
   }
 
   const onRef = el => {
+    // "inline" ref functions are called twice on render, once with null then again with DOM element
+    // ignore null here
     if (el === null) return
     set(state => {
+      // if the same DOM el as previous just return state
       if (state.el === el) return state
+      // if new DOM el clean up old DOM
       if (state.el && state.el !== el) cleanUp(state.el)
+      // only attach if we want to track touch
       if (state.props.trackTouch) {
         if (el && el.addEventListener) {
           el.addEventListener(touchStart, onStart)
           el.addEventListener(touchMove, onMove)
           el.addEventListener(touchEnd, onUp)
+          // store event attached DOM el for comparison
           return { ...state, el }
         }
       }
@@ -153,6 +156,8 @@ function getHandlers(set, props) {
 
   // set ref callback to attach touch event listeners
   const output = { ref: onRef }
+
+  // if track mouse attach mouse down listener
   if (props.trackMouse) {
     output.onMouseDown = onStart
   }