useLongPress
Fire a callback once a press is held for a threshold, with handlers that cover React Native's press events and the DOM's mouse and touch events.
useLongPress(onLongPress, { threshold, onStart, onFinish, onCancel }) returns handlers to spread onto a <Pressable>, <View> or <Button>. onLongPress fires once after threshold ms (default 400); releasing, leaving or a system interrupt before that cancels the press.Loading demo…
import { useState } from 'react';
import { Button, useLongPress } from '@plocks/ui';
export function Demo() {
const [state, setState] = useState<'idle' | 'pressing' | 'long-pressed'>('idle');
const handlers = useLongPress(() => setState('long-pressed'), {
threshold: 600,
onStart: () => setState('pressing'),
onCancel: () => setState('idle'),
});
return (
<Button {...handlers} variant={state === 'long-pressed' ? 'filled' : 'outline'}>
{state === 'idle' ? 'Hold me' : state === 'pressing' ? 'Keep holding…' : 'Long pressed'}
</Button>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources