# useLongPress

> A React long press hook for touch screens: handlers that fire after a hold, cancel on scroll and swallow the click that follows.

- Type: React hook (Hooks & Utilities)
- Access: Free (the source is open to everyone)
- Version: 1.0.0
- Install: `npx wingo-ui@latest add use-long-press`
- Docs: https://wingo-ui.com/components/use-long-press

## Interaction

Press and hold a message on a phone: it shrinks while you hold, then a reaction bar pops up and the phone buzzes where it can. Move your finger or scroll and nothing fires. With a mouse, right-click opens the same bar, or add mouse to pointerTypes in the playground to hold with the mouse too.

## Installation

```bash
npx wingo-ui@latest add use-long-press
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/use-long-press.json`

Files:

- `hooks/use-long-press.ts`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))

## Usage

```tsx
import { useState } from "react"
import { useLongPress } from "@/hooks/use-long-press"

export function MessageBubble({ text }: { text: string }) {
  const [menu, setMenu] = useState(false)
  const longPress = useLongPress<HTMLDivElement>(() => setMenu(true))

  return (
    <div
      {...longPress}
      onContextMenu={(event) => {
        // right-click with a mouse opens the same menu
        longPress.onContextMenu(event)
        event.preventDefault()
        setMenu(true)
      }}
      className="select-none rounded-2xl bg-foreground/5 px-3 py-2 [-webkit-touch-callout:none]"
    >
      {text}
      {menu && <span>Reactions</span>}
    </div>
  )
}
```

## API

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `onLongPress` | `(event: LongPressEvent<T>) => void` |  | useLongPress(onLongPress, options?): runs once the press has been held for delay ms. Gets the target element, the pointer position (clientX / clientY) and the pointer type. |
| `delay?` | `number` | `450` | Hold time in ms before it fires. The default is gestures.longPress from lib/motion, shared by every long press in the library. |
| `slop?` | `number` | `8` | How far in px the pointer may move before the press is cancelled, so scrolling a list never fires it (gestures.slop). |
| `pointerTypes?` | `readonly ("touch" \| "pen" \| "mouse")[]` | `"touch, pen"` | Which pointers can long press. A mouse is left out by default because right-click does the same job there. |
| `haptics?` | `boolean` | `true` | A 10ms vibration when it fires, on devices that support it (Android). Silently skipped elsewhere. |
| `disabled?` | `boolean` | `false` | Ignores every press. |
| `onStart / onCancel / onFinish?` | `(event: LongPressEvent<T>) => void / () => void / () => void` |  | A press began (start a holding style), ended before firing (released early, moved, scrolled), or the finger lifted after it fired. |
| `returns?` | `LongPressHandlers<T>` |  | onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onPointerLeave, onContextMenu and onClickCapture, to spread on the element (or on a Radix trigger through asChild, which merges them). Add select-none [-webkit-touch-callout:none] to the element so iOS shows no callout. |

## Parts

### LongPressEvent (type)

What onLongPress and onStart receive: { target, clientX, clientY, pointerType }.

### UseLongPressOptions (type)

The options object: delay, slop, disabled, pointerTypes, haptics, onStart, onCancel and onFinish.

### LongPressHandlers (type)

The returned pointer, context menu and click capture handlers to spread on the element.

### LongPressPointerType (type)

"touch" | "pen" | "mouse", the values pointerTypes accepts.

## Examples

- **Hold to confirm**: A 1.2 second hold deletes; the fill grows while you press and resets if you let go.
- **Tap opens, hold selects**: A photo grid where a long press enters selection mode and the click after it is swallowed.

## See also

- [Context Menu](https://wingo-ui.com/components/context-menu) ([Markdown](https://wingo-ui.com/components/context-menu.md))
- [Haptic Button](https://wingo-ui.com/components/haptic-button) ([Markdown](https://wingo-ui.com/components/haptic-button.md))
- [useShortcut](https://wingo-ui.com/components/use-shortcut) ([Markdown](https://wingo-ui.com/components/use-shortcut.md))
- [useMediaQuery](https://wingo-ui.com/components/use-media-query) ([Markdown](https://wingo-ui.com/components/use-media-query.md))
- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))

---

Canonical: https://wingo-ui.com/components/use-long-press
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt