swipe-react

swipe-react

Easy integration!!! Easily add touch devices support (smartphones, tablets) to your react components, with swipe direction detection.

Usage

• Install the npm package:

    npm install --save swipe-react

• Import it:

    import SwipeReact from 'swipe-react';

• Config swipe events ('left', 'right', 'up', 'down'), at least one of them, in your component constructor, or in render function:

    SwipeReact.config({
      left: () => {
        console.log('Swipe left detected.');
      },
      right: () => {
        console.log('Swipe right detected.');
      },
      up: () => {
        console.log('Swipe up detected.');
      },
      down: () => {
        console.log('Swipe down detected.');
      }
    });

• Integrate with your React component:

  <YourComponent {...SwipeReact.events} />

Example

import React, { Component } from 'react';
import SwipeReact from 'swipe-react';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      content: 'Swipe here!'
    };
    SwipeReact.config({
      left: () => {
        this.setState({
          content: 'left direction detected.'
        });
      },
      right: () => {
        this.setState({
          content: 'right direction detected.'
        });
      },
      up: () => {
        this.setState({
          content: 'up direction detected.'
        });
      },
      down: () => {
        this.setState({
          content: 'down direction detected.'
        });
      }
    });
  }
  render() {
    let styles = {
      height: '400px',
      fontSize: '34px',
      textAlign: 'center'
    };
    return (
      <div {...SwipeReact.events} tabIndex="1" style={styles}>
        {this.state.content}
      </div>
    );
  }
}

export default App;

Remarks

• You need to test it on a touch screen device, or open Smartphone/Tablet mode on Chrome Developer Tools.