Skip to content
aq-ui
Back to HooksHook

Use Long Press

Open-code aq-ui React hook for Use Long Press.

Installation

pnpm dlx aq-ui@alpha add use-long-press

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

import { useLongPress } from "@/hooks/use-long-press"

LongPressBind

interfaceSource L17

Type contract for LongPressBind.

interface LongPressBind<T extends HTMLElement>

Members

NameType
onPointerDownReact.PointerEventHandler<T>
onPointerMoveReact.PointerEventHandler<T>
onPointerUpReact.PointerEventHandler<T>
onPointerCancelReact.PointerEventHandler<T>
onPointerLeaveReact.PointerEventHandler<T>

useLongPress

functionSource L25

Open-code aq-ui React hook for Use Long Press.

function useLongPress<T extends HTMLElement>(callback: (event: React.PointerEvent<T>) => void, { delay = 500, movementTolerance = 10, disabled = false, preventDefault = true, onStart, onCancel, onFinish, }: UseLongPressOptions = {}): LongPressBind<T>
Returns
LongPressBind<T>

Parameters

NameTypeDefault
callback(event: React.PointerEvent<T>) => void—
options?UseLongPressOptions{}

UseLongPressOptions

interfaceSource L7

Type contract for UseLongPressOptions.

interface UseLongPressOptions

Members

NameTypeDefault
delay?number500
movementTolerance?number10
disabled?booleanfalse
preventDefault?booleantrue
onStart?() => void—
onCancel?() => void—
onFinish?() => void—

Registry dependencies

use-stable-callback

Files

  • hooks/use-long-press.ts

Source