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 vote231 views2 answers
Deploy create react app pm2
Javascript React
18 votes208 views1 answer
Get specific characters from state variable reactjs
Javascript React
0 vote189 views1 answer
Spining load react component
Javascript React
0 vote194 views1 answer
React component in for loop
Javascript React
0 vote180 views3 answers
Scrollview pull to refresh react native
Javascript React
0 vote192 views1 answer
Back button not working when modal open in react native
Javascript React
0 vote202 views1 answer
Concept of node js with react js
Javascript React
10 votes230 views2 answers
Failed to compile ./src/App.js Module not found: Can't resolve 'react-router-dom
Javascript React
23 votes180 views4 answers
How to copy to clipboard in react js
Javascript React
2 votes187 views1 answer
Can't import react bootstrap
Javascript React