Package Exports

react-easy-swipe
react-easy-swipe/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-easy-swipe) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
To prevent accidental swipes on scroll, pass a prop tolerance with the tolerance pixel as number.

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,
  tolerance: PropTypes.number.isRequired
}

Contributing

Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!

react-easy-swipe