useLongPress

A hook to detect long press (press-and-hold) interactions.

Overview

useLongPress allows you to detect when a user presses and holds an element for a specific duration. Useful for advanced interactions like showing context menus or "charging" actions.

Demo

Secure Action

Biometric Scan

Long press the fingerprint scanner to verify identity.

READY TO SCAN

API Reference

function useLongPress(callback: (e) => void, options?: Options)

Parameters

Name	Type	Description
`callback`	`function`	Function to call when threshold is reached.
`options.threshold`	`number`	Duration in ms (default: 400).
`options.onStart`	`function`	Called when press begins.
`options.onFinish`	`function`	Called when press ends (even if threshold met).
`options.onCancel`	`function`	Called if press is cancelled before threshold.

Usage Example

import { useLongPress } from 'react-hooks-ts'
 
function HoldButton() {
  const bind = useLongPress(() => {
    alert('Long Pressed!')
  }, { threshold: 1000 })
 
  return <button {...bind}>Hold Me (1s)</button>
}