Adds useClickOutside and useBodyScroll Hooks

lib/src/hooks/useBodyScrollLock.tsx

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from "react";
+
+const useLockBodyScroll = (value: boolean): void => {
+  useLayoutEffect((): (() => void) => {
+    value
+      ? (document.body.style.overflow = "hidden")
+      : (document.body.style.overflow = "auto");
+
+    return () => (document.body.style.overflow = "auto");
+  }, []);
+};
+
+export { useLockBodyScroll };

lib/src/hooks/useClickOutside.tsx

@@ -0,0 +1,33 @@
+import { RefObject, useEffect } from "react";
+
+type AnyEvent = MouseEvent | TouchEvent;
+
+function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: (event: AnyEvent) => void
+): void {
+  useEffect(() => {
+    const listener = (event: AnyEvent) => {
+      const el = ref?.current;
+
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener(`mousedown`, listener);
+    document.addEventListener(`touchstart`, listener);
+
+    return () => {
+      document.removeEventListener(`mousedown`, listener);
+      document.removeEventListener(`touchstart`, listener);
+    };
+
+    // Reload only if ref or handler changes
+  }, [ref, handler]);
+}
+
+export { useClickOutside };