1 | # Swipeable [![npm version](https://img.shields.io/npm/v/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable) [![npm downloads](https://img.shields.io/npm/dm/react-swipeable.svg?style=flat-square)](https://www.npmjs.com/package/react-swipeable)
|
2 | React swipe component - Swipe bindings for react
|
3 |
|
4 | [Demo](http://dogfessional.github.io/react-swipeable/)
|
5 |
|
6 | ### Install
|
7 | Using npm:
|
8 | ```console
|
9 | $ npm install --save react-swipeable
|
10 | ```
|
11 |
|
12 | ### Use
|
13 |
|
14 | react-swipeable generates a React component (defaults to `<div>`) and binds touch events to it.
|
15 |
|
16 | ```js
|
17 | var Swipeable = require('react-swipeable')
|
18 |
|
19 | var SampleComponent = React.createClass({
|
20 | render: function () {
|
21 | return (
|
22 | <Swipeable
|
23 | onSwiping={this.swiping}
|
24 | onSwipingUp={this.swipingUp}
|
25 | onSwipingRight={this.swipingRight}
|
26 | onSwipingDown={this.swipingDown}
|
27 | onSwipingLeft={this.swipingLeft}
|
28 | onSwiped={this.swiped}
|
29 | onSwipedUp={this.swipedUp}
|
30 | onSwipedRight={this.swipedRight}
|
31 | onSwipedDown={this.swipedDown}
|
32 | onSwipedLeft={this.swipedLeft}
|
33 | onTap={this.tapped} >
|
34 | You can swipe here!
|
35 | </Swipeable>
|
36 | )
|
37 | }
|
38 | })
|
39 | ```
|
40 |
|
41 | ## Event Props
|
42 |
|
43 | **`onSwiping`**, **`onSwipingUp`**, **`onSwipingRight`**, **`onSwipingDown`**, **`onSwipingLeft`**, are called with the event
|
44 | as well as the absolute delta of where the swipe started and where it's currently at. These constantly fire throughout touch events.
|
45 |
|
46 | **`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)`
|
47 |
|
48 | **`onSwipedUp`**, **`onSwipedRight`**, **`onSwipedDown`**, **`onSwipedLeft`** are called with the event
|
49 | 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.
|
50 |
|
51 | **`onSwiped`** is called with the event, the X and Y delta, whether or not the event was a flick, and the current velocity of the swipe. `this.props.onSwiped(e, x, y, isFlick, velocity)`
|
52 |
|
53 | **`onTap`** is called with the onTouchEnd event when the element has been tapped. `this.props.onTap(e)`
|
54 |
|
55 | #####Configuration Props
|
56 |
|
57 | **`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`.
|
58 |
|
59 | **`delta`** is the amount of px before we start firing events. Also affects how far `onSwipedUp`, `onSwipedRight`, `onSwipedDown`, and `onSwipedLeft` need to be before they fire events. The default value is `10`.
|
60 |
|
61 | **`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`.
|
62 |
|
63 | **`stopPropagation`** automatically calls stopPropagation on all 'swipe' events. The default value is `false`.
|
64 |
|
65 | **`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'`.
|
66 |
|
67 | **`trackMouse`** will allow mouse 'swipes' to be tracked(click, hold, move, let go). See [#51](https://github.com/dogfessional/react-swipeable/issues/51) for more details. The default value is `false`.
|
68 |
|
69 | **None of the props are required.**
|
70 | ### PropTypes
|
71 |
|
72 | ```
|
73 | onSwiped: React.PropTypes.func,
|
74 | onSwiping: React.PropTypes.func,
|
75 | onSwipingUp: React.PropTypes.func,
|
76 | onSwipingRight: React.PropTypes.func,
|
77 | onSwipingDown: React.PropTypes.func,
|
78 | onSwipingLeft: React.PropTypes.func,
|
79 | onSwipedUp: React.PropTypes.func,
|
80 | onSwipedRight: React.PropTypes.func,
|
81 | onSwipedDown: React.PropTypes.func,
|
82 | onSwipedLeft: React.PropTypes.func,
|
83 | onTap: React.PropTypes.func,
|
84 | flickThreshold: React.PropTypes.number,
|
85 | delta: React.PropTypes.number,
|
86 | preventDefaultTouchmoveEvent: React.PropTypes.bool,
|
87 | stopPropagation: React.PropTypes.bool,
|
88 | nodeName: React.PropTypes.string
|
89 | trackMouse: React.PropTypes.bool,
|
90 | ```
|
91 |
|
92 | ## Development
|
93 |
|
94 | Initial set up, run `npm install`.
|
95 |
|
96 | Make changes/updates to the `src/Swipeable.js` file. Then run `npm run build:lib` to build the final output.
|
97 |
|
98 | #### Test changes/updates with the examples
|
99 |
|
100 | cd into `examples` directory, run `npm install` within that directory, and then run `npm start`.
|
101 |
|
102 | After the server starts you can then view the examples page with your changes at `http://localhost:3000`.
|
103 |
|
104 | ## License
|
105 |
|
106 | MIT
|