> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useSwipe

> Detects swipe gestures on touch devices.

## Usage

```tsx theme={null}
import { useSwipe } from "@servicetitan/anvil2";

function SwipeableCard({ onDismiss }) {
  const { onTouchStart, onTouchMove, onTouchEnd, direction } = useSwipe(
    (dir) => {
      if (dir === "left") {
        onDismiss();
      }
    }
  );

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      Swipe left to dismiss
    </div>
  );
}
```

## Parameters

| Parameter | Type                                  | Description                              |
| --------- | ------------------------------------- | ---------------------------------------- |
| `func`    | `(direction: string \| null) => void` | Optional callback when swipe is detected |

## Return Value

| Property       | Type                        | Description               |
| -------------- | --------------------------- | ------------------------- |
| `onTouchStart` | `(e: TouchEvent) => void`   | Touch start event handler |
| `onTouchMove`  | `(e: TouchEvent) => void`   | Touch move event handler  |
| `onTouchEnd`   | `(e: TouchEvent) => void`   | Touch end event handler   |
| `direction`    | `"left" \| "right" \| null` | Current swipe direction   |

## Features

* Minimum swipe distance threshold (50px) to prevent false positives
* Detects both left and right swipes
* Provides touch event handlers for easy integration

## Examples

### Dismissible Card

```tsx theme={null}
function DismissibleCard({ id, onDismiss }) {
  const { onTouchStart, onTouchMove, onTouchEnd } = useSwipe((direction) => {
    if (direction === "left" || direction === "right") {
      onDismiss(id);
    }
  });

  return (
    <Card
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      <Text>Swipe to dismiss</Text>
    </Card>
  );
}
```

### Carousel Navigation

```tsx theme={null}
function ImageCarousel({ images }) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const { onTouchStart, onTouchMove, onTouchEnd } = useSwipe((direction) => {
    if (direction === "left" && currentIndex < images.length - 1) {
      setCurrentIndex((i) => i + 1);
    } else if (direction === "right" && currentIndex > 0) {
      setCurrentIndex((i) => i - 1);
    }
  });

  return (
    <div
      onTouchStart={onTouchStart}
      onTouchMove={onTouchMove}
      onTouchEnd={onTouchEnd}
    >
      <img src={images[currentIndex]} alt={`Slide ${currentIndex + 1}`} />
    </div>
  );
}
```

## Technical Details

* **Minimum swipe distance**: 50 pixels
* **Directions detected**: `"left"`, `"right"`, or `null` (if swipe distance is insufficient)
* The hook tracks touch position using `clientX` coordinates
* Regular touch events (taps) are ignored due to the minimum distance threshold