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 vote294 views1 answer
Stop playing music when page is closed react
Javascript React
0 vote278 views2 answers
Toastify react not working
Javascript React
0 vote259 views1 answer
Unable to resolve module `@react-native-community/toolbar-android
Javascript React
0 vote261 views2 answers
Capitalize each word from string in react
Javascript React
0 vote266 views1 answer
Initialize Axios React Redux CRUD API calls
Javascript React
1 vote260 views1 answer
Adding media queries in makeStyle material react
Javascript React
32 votes261 views2 answers
How to routing in react js
Javascript React
23 votes236 views6 answers
Map react
Javascript React
3 votes219 views2 answers
Handle onchange react
Javascript React
1 vote256 views3 answers
Iframe in react
Javascript React