feat(hooks): add useEventListener and useTimeout hooks

common/hooks.js

@@ -41,10 +41,12 @@ export const useForm = ({
   });
 
   const _hasError = (obj) => Object.keys(obj).some((name) => obj[name]);
-  const _mergeEventHandlers = (events = []) => (e) =>
-    events.forEach((event) => {
-      if (event) event(e);
-    });
+  const _mergeEventHandlers =
+    (events = []) =>
+    (e) =>
+      events.forEach((event) => {
+        if (event) event(e);
+      });
 
   /** ---------- NOTE(amine): Input Handlers ---------- */
   const handleFieldChange = (e) =>
@@ -164,10 +166,12 @@ export const useField = ({
     touched: undefined,
   });
 
-  const _mergeEventHandlers = (events = []) => (e) =>
-    events.forEach((event) => {
-      if (event) event(e);
-    });
+  const _mergeEventHandlers =
+    (events = []) =>
+    (e) =>
+      events.forEach((event) => {
+        if (event) event(e);
+      });
 
   /** ---------- NOTE(amine): Input Handlers ---------- */
   const handleFieldChange = (e) =>
@@ -390,3 +394,19 @@ export const useMediaQuery = () => {
     mobile: isMobile,
   };
 };
+
+export const useEventListener = (type, handler, dependencies) => {
+  React.useEffect(() => {
+    if (!window) return;
+
+    window.addEventListener(type, handler);
+    return () => window.removeEventListener(type, handler);
+  }, dependencies);
+};
+
+export const useTimeout = (callback, ms, dependencies) => {
+  React.useEffect(() => {
+    const timeoutId = setTimeout(callback, ms);
+    return () => clearTimeout(timeoutId);
+  }, dependencies);
+};