react-easy-swipe

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!

License

Similar packages

Other packages similar to react-easy-swipe

react-swipeable

react-swipeable is a React component that provides similar swipe detection capabilities. It offers more customization options and supports additional swipe events like swipe up and swipe down. Compared to react-easy-swipe, react-swipeable has a more extensive API and better documentation.

react-swipe

react-swipe is another alternative for handling swipe events in React. It is specifically designed for creating touch-enabled carousels and sliders. While it is more focused on carousel functionality, it can still be used for general swipe detection. It is slightly heavier than react-easy-swipe but offers more built-in features for carousel implementations.