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

0 vote404 views1 answer
React native add bottom tab and drawer menu
Javascript React
7 votes410 views1 answer
React Native vs Flutter
Javascript React
0 vote390 views1 answer
React native unexpected token '<'
Javascript React
0 vote367 views1 answer
React native fade in fade out animation
Javascript React
0 vote391 views1 answer
React native better camera
Javascript React
0 vote393 views1 answer
React.createElement
Javascript React
1 vote376 views1 answer
Change color react icon
Javascript React
2 votes366 views1 answer
React add gradient top to bottom
Javascript React
4 votes357 views1 answer
React propthpes or
Javascript React
1 vote413 views1 answer
Found page without a React Component as default export in
Javascript React