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

1 vote121 views2 answers
How to render react native app under the status bar
Javascript React
0 vote120 views1 answer
Remarkable react js
Javascript React
0 vote118 views1 answer
.env not working on react
Javascript React
0 vote121 views1 answer
React state as object
Javascript React
145 votes198 views6 answers
Add bootstrap to react
Javascript React
0 vote175 views1 answer
Show modal by using id in list react
Javascript React
0 vote83 views1 answer
ReactNative onPress doesn't exist
Javascript React
0 vote124 views1 answer
Connect react native app to local api macos
Javascript React
0 vote129 views1 answer
React inlinle style set background image
Javascript React
0 vote127 views1 answer
React download file from express res.download
Javascript React