---
title: usePointerSwipe
description: "Reactive swipe detection based on PointerEvents. Detects swipe direction and distance."
category: Sensors
sidebar:
  order: 3
type-table:
  import: "@usels/web"
  name: "UsePointerSwipe"
  params:
    children:
      - UsePointerSwipeOptions
---

## Demo

## Usage

<CodeTabs>
  <Fragment slot="hook">
    ```tsx twoslash
    // @noErrors
    import { usePointerSwipe } from "@usels/web";
    import { useRef$ } from "@usels/core";

    function SwipeDemo() {
      const el$ = useRef$<HTMLDivElement>();
      const { isSwiping$, direction$, distanceX$, distanceY$ } = usePointerSwipe(el$, {
        threshold: 50,
        onSwipeEnd: (e, dir) => console.log(`Swiped ${dir}`),
      });

      return (
        <div ref={el$} style={{ width: 300, height: 300, background: "#eee" }}>
          <p>Direction: {direction$.get()}</p>
          <p>
            Distance: {distanceX$.get()}, {distanceY$.get()}
          </p>
        </div>
      );
    }
    ```

  </Fragment>
  <Fragment slot="scope">
    ```tsx
    import { createPointerSwipe } from "@usels/web";
    import { createRef$ } from "@usels/core";

    function SwipeDemo() {
      "use scope"
      const el$ = createRef$<HTMLDivElement>();
      const { direction$, distanceX$, distanceY$ } = createPointerSwipe(el$, {
        threshold: 50,
        onSwipeEnd: (e, dir) => console.log(`Swiped ${dir}`),
      });

      return (
        <div ref={el$} style={{ width: 300, height: 300, background: "#eee" }}>
          <p>Direction: {direction$.get()}</p>
          <p>
            Distance: {distanceX$.get()}, {distanceY$.get()}
          </p>
        </div>
      );
    }
    ```

  </Fragment>
</CodeTabs>

### Reactive options

```typescript
import { observable } from "@usels/core";

const threshold$ = observable(50);
const { direction$ } = usePointerSwipe(el$, { threshold: threshold$ });

// Later: adjust threshold reactively
threshold$.set(100);
```

## Notes

**`options` is `DeepMaybeObservable`.** Each option field can be a plain value or an `Observable`. Callback options (`onSwipeStart`, `onSwipe`, `onSwipeEnd`) are passed as plain functions.