How to stop the slider from resetting to the left side on mouse release (react-spring react-use-gesture)

Question

Code sandbox: https://codesandbox.io/s/draggable-image-gallery-3-59crp

Im using react-use-gesture to create a horizontally draggable image slider.

So far the logic I have for dragging is

set({ x: down ? mx : 0 });

where if the user presses down on the mouse, the slider will translate to the left or right depending on the mx movement value. Once the user lets go of the mouse, it resets back to the left side: 0.

Relevant react-use-gesture docs: https://use-gesture.netlify.com/docs/state

I tried multiple attempts to prevent the resetting by replacing the 0 with offset from the API etc., but so far I haven't figured out the logic to prevent the reset.

score 0 · Answer 1 · answered Mar 27 '20 at 07:21

I'm new to use-gesture. I just played with your code. What about using offset instead of movement in useDrag?

const bind = useDrag(
  ({ offset: [x], direction, distance, cancel }) => {
    set({x});

    // if user drags to the right for more than 350px, reset position back to 0
    if (direction[0] === 1 && distance > 350) {
      cancel();
      console.log("Please swipe left");
    }
  }
);

Cancel is not working in this case. You have to set x to 0 somehow I think instead of using cancel.

How to stop the slider from resetting to the left side on mouse release (react-spring react-use-gesture)

1 Answers1