REACT EASY SWIPE
Add swipe interactions to your react component.
- Generated using react-init
Demo
http://leandrowd.github.io/react-easy-swipe/
- Open your console;
- Swipe over the content and check your console;
- This is a touch component so make sure your browser is emulating touch.
Tips:
-
To prevent scroll during swipe, return true from the handler passed to onSwipeMove
-
To allow mouse events to behave like touch, pass a prop allowMouseEvents
Instalation
npm install react-easy-swipe --save
Usage
;;; { console; } { console; console; } { console; } { const boxStyle = width: '100%' height: '300px' border: '1px solid black' background: '#ccc' padding: '20px' fontSize: '3em' ; return <Swipe onSwipeStart=thisonSwipeStart onSwipeMove=thisonSwipeMove onSwipeEnd=thisonSwipeEnd> <div style=boxStyle>Open the console and swipe me</div> </Swipe> ; } ReactDOM;
Properties
tagName: PropTypesstring className: PropTypesstring style: PropTypesobject children: PropTypesnode allowMouseEvents: PropTypesbool onSwipeUp: PropTypesfunc onSwipeDown: PropTypesfunc onSwipeLeft: PropTypesfunc onSwipeRight: PropTypesfunc onSwipeStart: PropTypesfunc onSwipeMove: PropTypesfunc onSwipeEnd: PropTypesfunc
Contributing
Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!