useLongPress.md

useLongPress

React sensor hook that fires a callback after long pressing.

Usage

import { useLongPress } from 'react-use';

const Demo = () => {
  const onLongPress = () => {
    console.log('calls callback after long pressing 300ms');
  };

  const defaultOptions = {
    isPreventDefault: true,
    delay: 300,
  };
  const longPressEvent = useLongPress(onLongPress, defaultOptions);

  return <button {...longPressEvent}>useLongPress</button>;
};

Reference

const {
  onMouseDown,
  onTouchStart,
  onMouseUp,
  onMouseLeave,
  onTouchEnd
} = useLongPress(
  callback: (e: TouchEvent | MouseEvent) => void,
  options?: {
    isPreventDefault?: true,
    delay?: 300
  }
)

• callback — callback function.
• options? — optional parameter.
  • isPreventDefault? — whether to call event.preventDefault() of touchend event, for preventing ghost click on mobile devices in some cases, defaults to true.
  • delay? — delay in milliseconds after which to calls provided callback, defaults to 300.