Skip to content
Advertisement

Swipe effect in react js

I’m trying to create a swipe event using React. I do not want to use any external component or jquery.

The css is something like : 

.outter{
  position:relative;
  width: 100%;
  height: 150px;
  background-color: blue;
}

.inner{
  position: absolute;
  width: 1000%; 
  left: 50px;
}
.child{
  float: left;
  margin-right: 15px;
}

In the react component I’m trying to do something like : 

class Test extends React.Component {
    constructor(props){
    super(props);

    this.state = {
        left: 0
    }
  }

  handleSwipe(){
    this.setState({left: -350})
  }

  render(){
    return(
        <div className="outter">
            <div className="inner" style={{left: this.state.left}} onSwipe={this.handleSwipe.bind(this)}>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
                 <div className="child"><img src="http://placehold.it/350x150" /></div>
            </div>
      </div>
    )
  }
}

React.render(<Test />, document.getElementById('container'));

How can I recognize swipe event?

If I in my example instead of onSwipe add onClick it works, but how can I make the swipe effect?

Here is jsfiddle.

Advertisement

Answer

You can add onTouch event handlers to your React components:

onTouchStart={touchStartEvent => this.handleTouchStart(touchStartEvent)}
onTouchMove={touchMoveEvent => this.handleTouchMove(touchMoveEvent)}
onTouchEnd={() => this.handleTouchEnd()}

You may also want to add event handlers for mouse events for cross-platform compatibility:

onMouseDown={mouseDownEvent => this.handleMouseDown(mouseDownEvent)}
onMouseMove={mouseMoveEvent => this.handleMouseMove(mouseMoveEvent)}
onMouseUp={() => this.handleMouseUp()}
onMouseLeave={() => this.handleMouseLeave()}

You have the right idea for updating the left property of state in an event handler, but if you want the swiping functionality to feel natural you’ll need to track the position of the pointer (be it a mouse or a touch) by updating left using the event’s clientX property.

To do this, you’ll need to store the position of the first touch and set left equal to the change in the touch’s location. For added realism, you can also keep track of the touch’s velocity and continue animating the component after the touch is finished.

Here’s a quick-n-dirty Codepen I made for swiping to remove items from a list:

https://codepen.io/swingthing/pen/ZBGBJb/

Advertisement