useLongPress
A React Hook that helps to handle long press events.
Demo
Usage
See API for more details.
Source
Click links below to view source on GitHub.
API
const lp = useLongPress(elementTarget, handler, options)
ElementTarget
ElementTarget is a union type that represents various kinds of elements that can be targeted.
See ElementTarget or ElementTarget Types for more details.
Handler
export type UseLongPressHandler = (evt: PointerEvent) => void
Options
export type UseLongPressModifiers = {
/**
* Whether to prevent the default behavior of the event
*/
preventDefault?: boolean
/**
* Whether to stop the propagation of the event
*/
stopPropagation?: boolean
/**
* Whether to only trigger the event once
*/
once?: boolean
/**
* Whether to capture the event
*/
capture?: boolean
/**
* Whether to only trigger the event on the target element itself
*/
self?: boolean
}
export interface UseLongPressOptions {
/**
* Time in ms till `longpress` gets called
*
* @defaultValue 500
*/
delay?: number
/**
* Event modifiers
*/
modifiers?: UseLongPressModifiers
/**
* Allowance of moving distance in pixels,
* The action will get canceled When moving too far from the pointerdown position.
*
* @defaultValue 10
*/
distanceThreshold?: number | false
}
Returns
export type UseLongPressReturns = {
/**
* Whether the element is pressed
*/
isPressed: boolean
/**
* Whether the element is long pressed
*/
isLongPressed: boolean
/**
* Whether the element is meet the threshold
*/
isMeetThreshold: boolean
/**
* Stop the long press event
*/
stop(): void
}
