swipeable
Register swipe events for dom elements on your mobile websites and get callbacks.
Install
npm install swipeable --save
Usage
var swipeable = ; ;
Callback
On a valid swipe, callback params are of the form:
left: true right: false top: false bottom: false /* * The above callback indicated that the user swiped from left to right. * For right to left: The right key is set to true. * For Top to bottom: The top key is set to true. * For Bottom to Top: The bottom key is set to true. */
Options
Options is an object consisting of the following overrides.
timeThreshold: 200 // Time duration(ms) during which the swipe should occur distanceThreshold: 200 // Minimum distance required to register a valid swipe /* * The time duration should be specified in milliseconds. * The timeThreshold defaults to 300ms. * * Distance is specified equivalent to scroll distance. * The distance threshold defaults to 100. */
Example
var swipeable = node = document; { console; /* * Prints params in the following format: * { left: true, right: false, bottom: false, top: false } */}; ;
Usage with React
Add a ref to the element on which swipe needs to be detected and register event in component did mount.
;; const Container extends React.Component constructorprops superprops; thisstate = // state ; thisonScroll = thisonScroll; } { ; } { /* * Params are in the following format: * { left: true, right: false, bottom: false, top: false } * The above indicates Left to right scroll. */ } { return <div ref="node"> // JSX </div> ; }} ;