Onclick hold react

import { useState, useEffect, useCallback } from 'react';

export default function useLongPress(callback = () => {}, ms = 300) {
  const [startLongPress, setStartLongPress] = useState(false);

  useEffect(() => {
    let timerId;
    if (startLongPress) {
      timerId = setTimeout(callback, ms);
    } else {
      clearTimeout(timerId);
    }

    return () => {
      clearTimeout(timerId);
    };
  }, [callback, ms, startLongPress]);

  const start = useCallback(() => {
    setStartLongPress(true);
  }, []);
  const stop = useCallback(() => {
    setStartLongPress(false);
  }, []);

  return {
    onMouseDown: start,
    onMouseUp: stop,
    onMouseLeave: stop,
    onTouchStart: start,
    onTouchEnd: stop,
  };
}

Source: stackoverflow.com

Similar codes

21 votes327 views4 answers
React memo
Javascript React
0 vote372 views1 answer
React native notifications error
Javascript React
0 vote410 views1 answer
How to trigger on Blur only when clicked outside parent component and not child component in react js
Javascript React
0 vote395 views1 answer
React bootstrap make col disapear in small screens
Javascript React
0 vote400 views1 answer
Enzymes are proteins that speed up reactions by
Javascript React
0 vote403 views1 answer
React router dom two page form
Javascript React
0 vote423 views1 answer
Navigation.openDrawer is not a function react native
Javascript React
0 vote376 views1 answer
React native elements bottom sheet close on back button press
Javascript React
0 vote392 views1 answer
Reactjs clic copy
Javascript React
0 vote381 views1 answer
If statement in react native
Javascript React