useLongPress

Hook that defines the logic when long pressing an element

sensors

test coverage

Last changed: last month

Installation

Library

CLI

Manual

import { useLongPress } from '@siberiacancode/reactuse';

Usage

const pressed = useLongPress(ref, () => console.log('callback'));
// or
const { ref, pressed } = useLongPress(() => console.log('callback'));

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to be long pressed
callback	(event: LongPressEvents) => void	-	The callback function to be invoked on long press
options?	UseLongPressOptions	-	The options for the long press

Returns

boolean

Parameters

Name	Type	Default	Note
callback	(event: LongPressEvents) => void	-	The callback function to be invoked on long press
options?	UseLongPressOptions	-	The options for the long press

Returns

boolean

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type LongPressEvents = MouseEvent | TouchEvent;

export interface UseLongPressOptions {
  // * The threshold time in milliseconds
  threshold?: number;
  // * The callback function to be invoked on long press cancel
  onCancel?: (event: LongPressEvents) => void;
  // * The callback function to be invoked on long press end
  onFinish?: (event: LongPressEvents) => void;
  // * The callback function to be invoked on long press start
  onStart?: (event: LongPressEvents) => void;
}

export interface UseLongPress {
  (
    target: HookTarget,
    callback: (event: LongPressEvents) => void,
    options?: UseLongPressOptions
  ): boolean;

  <Target extends Element>(
    callback: (event: LongPressEvents) => void,
    options?: UseLongPressOptions,
    target?: never
  ): {
    ref: StateRef<Target>;
    pressed: boolean;
  };
}

Source

Source • Demo

Contributors

D

debabin

H

hywax