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

2 votes118 views1 answer
Npm install --save react-native-vector-icon
Javascript React
0 vote106 views1 answer
React native floating button
Javascript React
0 vote112 views1 answer
React-simple-star-rating
Javascript React
2 votes107 views1 answer
React select with react hook form cotroller
Javascript React
0 vote106 views1 answer
Inline style to change background color react
Javascript React
2 votes111 views1 answer
Append a query string to the url react
Javascript React
0 vote112 views1 answer
How to clear form fields in react after submit
Javascript React
0 vote113 views2 answers
Npm react router 6.0.0-alpha.2
Javascript React
0 vote116 views1 answer
How to only register one click on nested component and not parent component in react js
Javascript React
0 vote112 views1 answer
How to change grid size with conditional expression in react
Javascript React