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

9 votes193 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
0 vote152 views1 answer
A react component can only return]
Javascript React
0 vote169 views1 answer
React Update a label when rate moves "quietly"
Javascript React
0 vote175 views1 answer
Unable to resolve "@react-native-community/masked-view" from
Javascript React
1 vote165 views2 answers
This setstate previous state react
Javascript React
0 vote197 views1 answer
React check if array contains value
Javascript React
1 vote240 views6 answers
UseEffect react
Javascript React
0 vote184 views1 answer
Reactive forms change event in angular
Javascript React
1 vote128 views1 answer
React native close other app
Javascript React
0 vote178 views3 answers
How to hide a screen from drawer in react navigation 5
Javascript React