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 vote317 views1 answer
How to check if url has hash in react
Javascript React
142 votes495 views5 answers
Install react
Javascript React
24 votes318 views6 answers
Shadow react native
Javascript React
0 vote304 views1 answer
Make a ReactNative component take the height and width of the current window
Javascript React
22 votes297 views3 answers
How to define array in react js
Javascript React
0 vote332 views1 answer
React native get route name
Javascript React
0 vote339 views1 answer
React inject component into another component
Javascript React
8 votes305 views1 answer
React-fragment
Javascript React
33 votes330 views2 answers
UseRef react ref
Javascript React
21 votes296 views3 answers
Map function in react
Javascript React