Swipe Component for react.
Built on top of hscroll
Build with webpack
- Responsive, children width automatically adjusted.
- Customize style easily, no default styles.
- Support wheel event, mousemove event and touchmove event.
- Driven by props, play/stop support.
- User friendly, buildin fast swipe check.
- No conflit with transition property on children.
- Infinite loop
npm i rc-swipe -S
<Swipe style={boxStyles}>
<div>one</div>
<div>two</div>
<div>three</div>
</Swipe>
| name | type | default | description |
|---|---|---|---|
| play | bool | false | Playing status |
| interval | number | 2000 | Play interval in miliseconds |
| active | number | 0 | Current active item index |
| threshold | number | 200 | Maximun duration in ms for fast swipe |
| fastThreshold: | number | 15 | minimum moved distance for fast swipe |
| duration | number | 200 | duration for transition |
| onShow | func | null | callback function called with active index after active element changed |
Remember use onShow to sync active property if you change swipe state by props
You can also have className style props for swipe element.
MIT