swipe

Easy handler for common swipe operations

Oct 25, 2018
Easy handler for common swipe operations

REACT EASY SWIPE

Add swipe interactions to your react component.

  • Generated using react-init

View demo Download Source

  • 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:

  1. To prevent scroll during swipe, return true from the handler passed to onSwipeMove

  2. To allow mouse events to behave like touch, pass a prop allowMouseEvents

Instalation

npm install react-easy-swipe --save

Usage

import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import Swipe from 'react-easy-swipe'; class MyComponent extends Component { onSwipeStart(event) { console.log('Start swiping...', event); } onSwipeMove(position, event) { console.log(`Moved ${position.x} pixels horizontally`, event); console.log(`Moved ${position.y} pixels vertically`, event); } onSwipeEnd(event) { console.log('End swiping...', event); } render() { const boxStyle = { width: '100%', height: '300px', border: '1px solid black', background: '#ccc', padding: '20px', fontSize: '3em' }; return ( <Swipe onSwipeStart={this.onSwipeStart} onSwipeMove={this.onSwipeMove} onSwipeEnd={this.onSwipeEnd}> <div style={boxStyle}>Open the console and swipe me</div> </Swipe> ); } } ReactDOM.render(<MyComponent/>, document.getElementById('root'));

Properties

{ tagName: PropTypes.string, className: PropTypes.string, style: PropTypes.object, children: PropTypes.node, allowMouseEvents: PropTypes.bool, onSwipeUp: PropTypes.func, onSwipeDown: PropTypes.func, onSwipeLeft: PropTypes.func, onSwipeRight: PropTypes.func, onSwipeStart: PropTypes.func, onSwipeMove: PropTypes.func, onSwipeEnd: PropTypes.func }

GitHub

Recommended