Swipe bindings for react. http://dogfessional.github.io/react-swipeable/
Using npm:
$ npm install --save react-swipeable
react-swipeable generates a React component (defaults to <div>
) and binds touch events to it.
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}>
You can be swipe here!
</Swipeable>
)
}
})
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)
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
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)
#####Configuration Props
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
.
preventDefaultTouchmoveEvent
is whether to prevent the browser's 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.
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
nodeName: React.PropTypes.string
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.
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
.
MIT