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

24 votes128 views5 answers
How to change port in react js
Javascript React
0 vote136 views2 answers
React how to change localhost url
Javascript React
1 vote132 views2 answers
React how to sleep 1 second
Javascript React
1 vote135 views2 answers
What is the purpose of the super(props) method in React
Javascript React
1 vote139 views1 answer
Docker react module not found
Javascript React
4 votes147 views1 answer
How to use font awewsome in react app
Javascript React
32 votes145 views1 answer
Install react router in react app
Javascript React
1 vote89 views1 answer
Mkdir: cannot create directory â€˜src/components/dashboardâ€™: no such file or directory in react
Javascript React
4 votes151 views2 answers
React helmet
Javascript React
142 votes305 views6 answers
Create-react-app
Javascript React