MaxInterview - onclick hold react

showing results for - "onclick hold react"

24 Oct 2017

1import { useState, useEffect, useCallback } from 'react';
2
3export default function useLongPress(callback = () => {}, ms = 300) {
4  const [startLongPress, setStartLongPress] = useState(false);
5
6  useEffect(() => {
7    let timerId;
8    if (startLongPress) {
9      timerId = setTimeout(callback, ms);
10    } else {
11      clearTimeout(timerId);
12    }
13
14    return () => {
15      clearTimeout(timerId);
16    };
17  }, [callback, ms, startLongPress]);
18
19  const start = useCallback(() => {
20    setStartLongPress(true);
21  }, []);
22  const stop = useCallback(() => {
23    setStartLongPress(false);
24  }, []);
25
26  return {
27    onMouseDown: start,
28    onMouseUp: stop,
29    onMouseLeave: stop,
30    onTouchStart: start,
31    onTouchEnd: stop,
32  };
33}
34

source

similar questions

react onclick div click outside react component react why onclick property function trigger without click react type div onclick reactjs onclick open new page how to add oncklick button react how to execute function without using onclick on react code example open modal on clicking select option in react onclick react how to add a click handler in react js react onclick type onclick on fragment react onclick start and stop the count react handleclick react onclick inline function react onclick 3d 7b 28window open react js

queries leading to this page

onclick hold event jsx react long click event click and hold event react press and hold a button click on react react js click and hold how to give more buttons on long press in react js react hold click onclick hold react click and hold react react onmouse click hold on click hold reactr react click and hold onclick hold react