ENGLISH·COURSE API
    Preparing search index...

    Function

    useHorizontalSwipe

    • Client hook: a sideways drag over an element, as a pair of callbacks.

      Parameters

      • callbacks: HorizontalSwipeCallbacks

        What to run for each direction the finger can travel

      Returns HorizontalSwipeHandlers

      Handlers to spread on the element the gesture happens over

      Pointer events rather than touch events, so one code path covers a finger, a trackpad and a mouse — and so the gesture can be driven in a test and in Storybook without synthesising the TouchList objects jsdom does not build.

      The callbacks are named after the finger, not after what the movement means. What the hand did is all this hook knows; what it should do is the caller's to decide, which is also where a right-to-left locale would one day reverse the mapping without this file changing.

      A movement counts only if it travels at least SWIPE_THRESHOLD_PX sideways and travels further sideways than up or down. The second half is what leaves a scrolling page alone: a drag aimed at the document is vertically dominant, and this declines it however far sideways it drifts.

      The pressed-at coordinate lives in a ref rather than in state: nothing renders it, and storing it in state would repaint the element mid-gesture for no visible change.

      A drag released outside the element is not seen, since the handlers sit on the element itself; the pointer is not captured, because capturing it would put setPointerCapture — which jsdom does not implement — on the path every test has to walk.

      const swipeHandlers = useHorizontalSwipe({
        onSwipeLeft: showNextFrame,
        onSwipeRight: showPreviousFrame,
      });

      <section {...swipeHandlers}>…</section>

    Settings

    Member Visibility