Swipe effect in react js

Question

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{
  posit         


        

Answer 1

Just found a DOM event that could be useful. Add .ontouchend to your HTML tag to detect any swipe event originating from that tag.

https://www.w3schools.com/jsref/event_touchend.asp - ref

Answer 2

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/

Answer 3

I used good solution above as a base for build what I was needed. Maybe somebody need something like this. Idea was to move my custom slider left and right on swipe effect. If you want it to be more sensitive adjust 150 to 75.

const [touchStart, setTouchStart] = React.useState(0);
const [touchEnd, setTouchEnd] = React.useState(0);

function handleTouchStart(e) {
    setTouchStart(e.targetTouches[0].clientX);
}

function handleTouchMove(e) {
    setTouchEnd(e.targetTouches[0].clientX);
}

function handleTouchEnd() {
    if (touchStart - touchEnd > 150) {
        // do your stuff here for left swipe
        moveSliderRight();
    }

    if (touchStart - touchEnd < -150) {
        // do your stuff here for right swipe
        moveSliderLeft();
    }
}