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

126 votes307 views4 answers
React app using npm
Javascript React
2 votes283 views2 answers
Set delay react native
Javascript React
0 vote229 views2 answers
React material ui
Javascript React
0 vote223 views1 answer
Apache react deploy "conf"
Javascript React
0 vote216 views1 answer
React bootstrap font awesome icons
Javascript React
0 vote220 views1 answer
Installe datatable to reactjs project
Javascript React
0 vote224 views1 answer
React this.state.selectedDays.toLocaleDateString is not a function
Javascript React
0 vote233 views1 answer
React show new app
Javascript React
0 vote196 views5 answers
Line 7:18: 'Section' is not defined react/jsx-no-undef
Javascript React
0 vote228 views1 answer
How to use adminlte in reacts
Javascript React