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

114 votes163 views3 answers
Run react app
Javascript React
0 vote135 views1 answer
React native sectionlist filter
Javascript React
0 vote202 views1 answer
Mixed line chart for angular or react
Javascript React
0 vote150 views1 answer
React duration picker
Javascript React
112 votes173 views5 answers
Command to create react app
Javascript React
9 votes164 views3 answers
React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
-1 vote145 views1 answer
How to insert divider in react native
Javascript React
144 votes342 views6 answers
How to install react js
Javascript React
18 votes140 views4 answers
React for loop in render
Javascript React
0 vote138 views1 answer
How to link a photo in expo react native
Javascript React