useLongPress

Category

Sensors

Export Size

1.32 kB

Last Changed

5 days ago

Listen for a long press on an element. Returns a stop function.

Demo

Usage

import { useLongPress } from '@reause/core'
import { useRef, useState } from 'react'

const htmlRefHook = useRef<HTMLButtonElement | null>(null)
const [longPressedHook, setLongPressedHook] = useState(false)

function onLongPressCallbackHook(e: PointerEvent) {
  setLongPressedHook(true)
}
function resetHook() {
  setLongPressedHook(false)
}

useLongPress(
  htmlRefHook,
  onLongPressCallbackHook,
  {
    modifiers: {
      prevent: true,
    },
  },
)

return (
  <>
    <p>
      Long Pressed:
      {longPressedHook ? 'true' : 'false'}
    </p>

    <button ref={htmlRefHook} className="ml-2 button small">
      Press long
    </button>

    <button className="ml-2 button small" onClick={resetHook}>
      Reset
    </button>
  </>
)

Custom Delay

By default, the handler fires after 500ms. You can customize this with the delay option. It can be a number or a function that receives the PointerEvent.

import { useLongPress } from '@reause/core'

// Fixed delay
useLongPress(target, handler, { delay: 1000 })

// Dynamic delay based on event
useLongPress(target, handler, {
  delay: ev => ev.pointerType === 'touch' ? 800 : 500,
})

Distance Threshold

The long press will be canceled if the pointer moves more than the threshold (default: 10 pixels). Set to false to disable movement detection.

import { useLongPress } from '@reause/core'

// Custom threshold
useLongPress(target, handler, { distanceThreshold: 20 })

// Disable movement detection
useLongPress(target, handler, { distanceThreshold: false })

On Mouse Up Callback

You can provide an onMouseUp callback to be notified when the pointer is released.

import { useLongPress } from '@reause/core'

useLongPress(target, handler, {
  onMouseUp(duration, distance, isLongPress, pointerEvent) {
    console.log(`Held for ${duration}ms, moved ${distance}px, long press: ${isLongPress}, x: ${pointerEvent.clientX}`)
  },
})

Modifiers

The following modifiers are available:

Modifier	Description
stop	Calls event.stopPropagation()
once	Removes event listener after first trigger
prevent	Calls event.preventDefault()
capture	Uses capture mode for event listener
self	Only trigger if target is the element itself

useLongPress(target, handler, {
  modifiers: {
    prevent: true,
    stop: true,
  },
})

Component Usage

Not ported — upstream ships a OnLongPress component (Vue, render-slot based); in React the hook is used directly.

Directive Usage

Not ported — upstream ships a vOnLongPress directive (Vue, v- directive); in React the hook is used directly.

Type Declarations

export interface UseLongPressModifiers {
    stop?: boolean;
    once?: boolean;
    prevent?: boolean;
    capture?: boolean;
    self?: boolean;
}

export interface UseLongPressOptions {
    delay?: number | ((ev: PointerEvent) => number);
    modifiers?: UseLongPressModifiers;
    distanceThreshold?: number | false;
    onMouseUp?: (duration: number, distance: number, isLongPress: boolean, pointerEvent: PointerEvent) => void;
}

export type UseLongPressReturn = () => void

export function useLongPress(target: RefObject<EventTarget | null | undefined>, handler: (evt: PointerEvent) => void, options?: UseLongPressOptions): UseLongPressReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

bc61f - fix(core): resolve useLongPress audit findings (#596)

692cc - feat(core): add useLongPress (#34)