1.1.1 • Published 6 years ago
react-swipe-view v1.1.1
react-swipe-view
react component for mobile, switch tab views by gesture
install
npm i react-swipe-viewusage
import SwipeView from 'react-swipe-view'
<SwipeView cur={0} num={5} tabWidth={375} tabChange={tabChange} onSwipe={onSwipe} animation={{duration:0.3, timing: 'ease', delay: 0}} disableTouch={['.disabled']}>
{views}
</SwipeView>check the demo code at example folder and effect here
Prop Types
| Property | Type | Required? | Description |
|---|---|---|---|
| num | Number | ✓ | total number of tab view |
| tabWidth | Number | ✓ | width of each tab view |
| cur | Number | current tab index start from 0, default 0 | |
| fastSwipeTime | Number | swipe time less then fastSwipeTime(default 300ms) will cause tab view change | |
| tabChange | Function | callback invoked when tab view changed by user's gesture (index: Number): void | |
| onSwipe | Function | callback invoked when user is sliding (isSwipe: Boolean):void, if user is sliding horizontally isSwipe is true else false | |
| containerStyle | Object | this component use display: flex to layout inner tab views, set containerStyle to change it | |
| animation | Object | define the animation props for tab transition. eg:{duration: 0.3, timing: 'ease', delay: 0} | |
| disableTouch | Array | an array of dom selectors, indicate the dom not trigger touch effect. eg: ['.disabled', '.no-touch']. selector should not use , |