UNPKG

4.46 kBMarkdownView Raw
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)
2React swipe component - Swipe bindings for react
3
4[Demo](http://dogfessional.github.io/react-swipeable/)
5
6### Install
7Using npm:
8```console
9$ npm install --save react-swipeable
10```
11
12### Use
13
14react-swipeable generates a React component (defaults to `<div>`) and binds touch events to it.
15
16```js
17var Swipeable = require('react-swipeable')
18
19var 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
44as 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
49as 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
94Initial set up, run `npm install`.
95
96Make 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
100cd into `examples` directory, run `npm install` within that directory, and then run `npm start`.
101
102After the server starts you can then view the examples page with your changes at `http://localhost:3000`.
103
104## License
105
106MIT