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 vote205 views1 answer
React native blur view crashing on android
Javascript React
0 vote233 views1 answer
Error: Error: Unable to resolve module `react-native-gesture-handler` from `node_modules\@react-navigation\native\lib\module\Scrollables.js`: react-native-gesture-handler could not be found within the project.
Javascript React
0 vote214 views1 answer
Ui5 React bind element
Javascript React
1 vote199 views6 answers
Tailwind css in react
Javascript React
18 votes216 views6 answers
Import svg react
Javascript React
0 vote217 views1 answer
React userefrence example
Javascript React
2 votes206 views1 answer
React function being called every minute
Javascript React
31 votes214 views1 answer
Install react router dom and save
Javascript React
0 vote223 views1 answer
Hot loading react native shortcut key
Javascript React
0 vote189 views1 answer
Update array hooks react
Javascript React