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

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();
    }
}