r-swipeable
v1.1.1
Published
Swipeable react wrapper for any number of child elements. (web)
Downloads
27
Readme
r-swipeable
r-swipeable provides Swipeable
which makes its subcomponents horizontally swipeable.
- Repositions to nearest child center after a flick gesture.
- Uses
requestAnimationFrame
to manage translations changes.
Usage
Swipe and drag
import React, { Component, PropTypes } from 'react';
import Swipeable from 'r-swipeable';
function renderTestItems() {
return [1, 2, 3, 4, 5].map(i => (
<div
className={`child child-${i}`}
key={ i }
>
{ i }
</div>
));
}
const SwipeableComponent = () => (
<Swipeable>
{ renderTestItems() }
</Swipeable>
);
export default SwipeableComponent;
Example
Add button navigation
To manage the swiper state from a parent component us the following structure:
class SwipeableComponent extends Component {
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
this.forward = this.step.bind(this, true);
this.backward = this.step.bind(this, false);
}
step(forward) {
let currentIndex = this.state.currentIndex;
if (forward) {
this.setState({ currentIndex: ++this.state.currentIndex });
} else {
this.setState({ currentIndex: --this.state.currentIndex });
}
}
onChange(index) {
// Update container state if swipeable is updated internally by a drag.
this.setState({ currentIndex: index });
}
render() {
return (
<div>
<Swipeable
onChange={ this.onChange }
currentIndex={ this.state.currentIndex }
>
{ renderTestItems() }
</Swipeable>
<div onClick={ this.forward }>
{ `Go to forwards` }
</div>
<div onClick={ this.backward }>
{ `Go to backwards` }
</div>
</div>
);
}
}
export default SwipeableComponent;
API
<Swipeable>
Wrapper component which makes its child elements swipeable.
Props
children
(required) - Elements that will be wrapper (in row).
children
(required) - Elements that will be wrapper and made swipeable. (horizontally)
flickSensitivity
- Specifies a limit which decides when an actual flick gesture should be triggered.
slopeLimit
- Indicates if a swipe should be considered x-drag or y-drag. It's only possible to swipe in on direction at the time.
Methods
onChange(callback)
Called with the new index
as a parameter, every time a new index is set.
function cb(index) {
...
}
<Swipeable onChange={ cb }>
...
</Swipeable>