Swipeable

Install

$ npm install react-swipeable

Use

var Swipeable = require('react-swipeable')

var SampleComponent = React.createClass({
  render: function () {
    return (
      <Swipeable
        onSwiping={this.swiping}
        onSwipingUp={this.swipingUp}
        onSwipingRight={this.swipingRight}
        onSwipingDown={this.swipingDown}
        onSwipingLeft={this.swipingLeft}
        onSwipedUp={this.swipedUp}
        onSwipedRight={this.swipedRight}
        onSwipedDown={this.swipedDown}
        onSwipedLeft={this.swipedLeft}
        onSwiped={this.handleSwipeAction}
        preventDefaultTouchmoveEvent={false}>
        <div>
          This element can be swiped
        </div>
      </Swipeable>
    )
  }
})

Examples:

http://dogfessional.github.io/react-swipeable/

Props

None of the props are required. onSwiping, onSwipingUp, onSwipingRight, onSwipingDown, onSwipingLeft, calls back 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)

onSwipedUp, onSwipedRight, onSwipedDown, onSwipedLeft calls back 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)

flickThreshold is a number (float) which determines the max velocity of a swipe before it's considered a flick.

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.

PropTypes

  onSwiped: React.PropTypes.func,
  onSwiping: React.PropTypes.func,
  onSwipingUp: React.PropTypes.func,
  onSwipingRight: React.PropTypes.func,
  onSwipingDown: React.PropTypes.func,
  onSwipingLeft: React.PropTypes.func,
  onSwipedUp: React.PropTypes.func,
  onSwipedRight: React.PropTypes.func,
  onSwipedDown: React.PropTypes.func,
  onSwipedLeft: React.PropTypes.func,
  flickThreshold: React.PropTypes.number,
  delta: React.PropTypes.number,
  preventDefaultTouchmoveEvent: React.PropTypes.bool

Development

Initial set up, run npm install.

Make changes/updates to the src/Swipeable.js file. Then run npm run build:lib to build the final output.

Test changes/updates with the examples

cd into examples directory, run npm install within that directory, and then run npm start.

After the server starts you can then view the examples page with your changes at http://localhost:3000.

License

MIT