Scrolling effect in js reaction

Question

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

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 am 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 a swipe event?

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

Here is the jsfiddle .

Answer 1

You can add onTouch event onTouch to your React components:

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

You can also 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 to update the state property of the left state in the event handler, but if you want the scrolling function to look natural, you will need to track the position of the pointer (be it a mouse or touch) by updating left using the clientX event clientX .

To do this, you need to save the position of the first touch and set left equal to the change in the position of the touch. For added realism, you can also track the velocity of the click and continue animating the component after the completion of the touch.

Here's the quick n-dirty code I did to scroll to remove items from the list:

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