React Swipeable is a lightweight React hook, `useSwipeable`, designed to easily add swipe and touch event handling capabilities to any React component. It abstracts away the complexities of touch events, providing a consistent API for detecting various swipe directions (up, down, left, right), tap events, and customizable thresholds for swipe detection via the `delta` prop. The library is currently at version 7.0.2 and is actively maintained by FormidableLabs, with regular updates to support new React versions (e.g., React 19) and introduce new features like `swipeDuration` and `onSwipeStart`. Its key differentiators include its hook-based API, fine-grained control over touch event options, and a focus on performance by leveraging passive event listeners by default, addressing Lighthouse performance issues related to touch events.
npm install react-swipeableVerified import paths — ran on the pinned version, not inferred.
This example demonstrates how to use `useSwipeable` to detect swipe directions and taps, updating the UI accordingly. It includes common configuration options like `preventScrollOnSwipe`, `delta`, and `swipeDuration`.
Review your swipe duration requirements and explicitly set `swipeDuration` if you need to limit the time a swipe can take. Utilize `touchEventOptions` for fine-grained control over event listener behavior, especially if `preventDefaultTouchmoveEvent` is `true`.
If your application relies on `event.preventDefault()` within touchmove handlers, ensure `preventDefaultTouchmoveEvent` is explicitly set to `true` in your `useSwipeable` configuration. Otherwise, your `preventDefault` calls may be ignored, potentially causing unexpected scroll behavior.
If your logic depends on the `first` property to differentiate between the start of a swipe and subsequent `onSwiping` events, ensure you are on version `6.0.1` or higher. Alternatively, use the `onSwipeStart` prop (available since v6.1.0) which is guaranteed to only fire once at the beginning of a swipe.
If you require different swipe thresholds for horizontal and vertical movements, update `delta` to an object like `{ x: 20, y: 10 }`. If you pass a single number, it will apply to all directions.Ensure `handlers` is spread directly onto a native HTML element (e.g., `div`, `span`) that can receive event listeners. Example: `<div {...handlers}>...</div>`The `useSwipeable` hook returns an object of event handlers and props that must be spread onto the target DOM element. Do not pass the configuration object directly to the element. Correct: `<div {...handlers}>`, Incorrect: `<div onSwiped={...}>`Ensure that `useSwipeable` is only called at the top level of a React functional component or another custom hook. Do not call it inside loops, conditions, or nested functions.