useLongPress

Overview

Listen for the long press event of the target element.

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useLongPress.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useLongPress.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useLongPress.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useLongPress.json

Listen for the long press event of the target element.

Examples

Basic usage

Listen for click and long press events at the same time

Move threshold

API

useLongPress(
  onLongPress: (event: MouseEvent | TouchEvent) => void,
  target: Target,
  options: {
    delay?: number;
    moveThreshold?: { x?: number; y?: number };
    onClick?: (event: MouseEvent | TouchEvent) => void;
    onLongPressEnd?: (event: MouseEvent | TouchEvent) => void;
  }
);

Params

Property	Description	Type	Default
delay	Long press time	`number`	`300`
moveThreshold	Move threshold after press. If exceeded, the long press function won't be triggered	`{ x?: number; y?: number }`	-
onClick	Click event	`(event: MouseEvent \| TouchEvent) => void`	-
onLongPressEnd	Long press end event	`(event: MouseEvent \| TouchEvent) => void`	-

Remark

Please refer to: https://stackoverflow.com/a/11237968 to disable the ability to long press to select text on the phone

useLongPress

On this page