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 vote213 views1 answer
Outline none react native web
Javascript React
8 votes212 views2 answers
Set value as object in react hooks
Javascript React
6 votes189 views2 answers
Hr react
Javascript React
6 votes202 views1 answer
Import useHistory react-router-dom version 6
Javascript React
0 vote182 views1 answer
Key being passed as prop react
Javascript React
1 vote222 views1 answer
React event target square brackets
Javascript React
0 vote276 views1 answer
This.props undefined react native
Javascript React
0 vote196 views1 answer
Uploading profile pic with react.js node.js express.js REST API to sqlite DB
Javascript React
0 vote302 views1 answer
React big calendar messages
Javascript React
0 vote207 views2 answers
React arrow function component
Javascript React