ecklf · September 7, 2021 09:24 · Sep 7, 2021 · Sep 7, 2021
diff --git a/...er holding down an element for a duration → useTimedEvent.ts b/...er holding down an element for a duration → useTimedEvent.ts
diff --git a/Trigger an event after holding down an element for a duration b/Trigger an event after holding down an element for a duration
@@ -0,0 +1,71 @@
+// Usage:
+// const Button = () => {
+//   const { completion, ...bind } = useTimedEvent(() => { fire(); }, { duration: 1000 });
+//   return <button {...bind}>Button</button>;
+// };
+
+import { useEffect, useRef, useState } from "react";
+
+const useTimedEvent = (
+  callback: (() => void) | (() => Promise<void>),
+  options?: { refreshRate?: number; duration?: number }
+) => {
+  const timerId = useRef<any>(null);
+  const [progress, setProgress] = useState(0);
+
+  const refreshRate = options?.refreshRate ?? 10;
+  const triggerAt = (options?.duration ?? 1000) / refreshRate;
+  const completion = (progress / triggerAt) * 100;
+
+  useEffect(() => () => clearInterval(timerId.current), []);
+
+  useEffect(() => {
+    if (progress === triggerAt) {
+      endProgress();
+      callback();
+    }
+  }, [progress, triggerAt, callback]);
+
+  const startProgress = () => {
+    timerId.current = setInterval(
+      () => setProgress((val) => val + 1),
+      refreshRate
+    );
+  };
+
+  const endProgress = () => {
+    setProgress(0);
+    clearInterval(timerId.current);
+  };
+
+  const onMouseDown = () => {
+    startProgress();
+  };
+
+  const onTouchStart = () => {
+    startProgress();
+  };
+
+  const onMouseUp = () => {
+    endProgress();
+  };
+
+  const onMouseOut = () => {
+    endProgress();
+  };
+
+  const onTouchEnd = () => {
+    endProgress();
+  };
+
+  return {
+    completion,
+    onMouseDown,
+    onTouchStart,
+    onMouseUp,
+    onMouseOut,
+    onTouchEnd,
+  };
+};
+
+export default useTimedEvent;