react-easy-swipe
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.22 • Public • Published

    REACT EASY SWIPE

    FOSSA Status

    Add swipe interactions to your react component.

    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:

    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

    3. 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!

    License

    FOSSA Status

    Install

    npm i react-easy-swipe

    DownloadsWeekly Downloads

    233,446

    Version

    0.0.22

    License

    MIT

    Unpacked Size

    194 kB

    Total Files

    12

    Last publish

    Collaborators

    • leandrowd