feat: 🎸 Added new hooks

Author: prc5

README.md

@@ -17,10 +17,13 @@
     <img src="https://custom-icon-badges.demolab.com/badge/typescript-%23007ACC.svg?logo=typescript&logoColor=white" />
   </a>
   <a href="https://www.npmjs.com/package/@better-hooks/window">
-    <img src="https://custom-icon-badges.demolab.com/bundlephobia/min/@better-hooks/window?color=64BC4B&logo=package" />
+    <img src="https://custom-icon-badges.demolab.com/npm/v/@better-hooks/window.svg?logo=npm&color=E10098" />
   </a>
   <a href="https://www.npmjs.com/package/@better-hooks/window">
-    <img src="https://custom-icon-badges.demolab.com/npm/v/@better-hooks/window.svg?logo=npm&color=E10098" />
+    <img src="https://custom-icon-badges.demolab.com/bundlephobia/minzip/@better-hooks/window?color=blueviolet&logo=package" />
+  </a>
+  <a href="https://www.npmjs.com/package/@better-hooks/window">
+    <img src="https://custom-icon-badges.demolab.com/npm/dm/@better-hooks/window?logoColor=fff&logo=trending-up" />
   </a>
 </p>
 
@@ -34,10 +37,18 @@ Handle window events and observe window size
 
 🚀 **Fast and light**
 
-✨ **Lifecycle window events**
+✨ **Lifecycle Window events**
+
+💎 **Lifecycle Document events**
 
 🎯 **Window size**
 
+🪄 **Window scroll position**
+
+💡 **Window focus**
+
+🎊 **SSR Support**
+
 ## Installation
 
 ```bash
@@ -62,6 +73,14 @@ import { useWindowEvent } from "@better-hooks/window";
 
 const MyComponent: React.FC = () => {
   // Unmounts event with component lifecycle
+  useWindowEvent("scroll", () => {
+    // ... Do something
+  });
+
+  useWindowEvent("wheel", () => {
+    // ... Do something
+  });
+
   useWindowEvent("resize", () => {
     // ... Do something
   });
@@ -73,21 +92,21 @@ const MyComponent: React.FC = () => {
 
 ```
 
+---
+
+#### useDocumentEvent
+
 ```tsx
 import React from "react";
-import { useWindowEvent } from "@better-hooks/window";
+import { useDocumentEvent } from "@better-hooks/window";
 
 const MyComponent: React.FC = () => {
   // Unmounts event with component lifecycle
-  useWindowEvent("scroll", () => {
+  useDocumentEvent("visibilitychange", () => {
     // ... Do something
   });
 
-  useWindowEvent("wheel", () => {
-    // ... Do something
-  });
-
-  useWindowEvent("resize", () => {
+  useDocumentEvent("scroll", () => {
     // ... Do something
   });
 
@@ -116,3 +135,49 @@ const MyComponent: React.FC = () => {
 }
 
 ```
+
+---
+
+#### useWindowScroll
+
+```tsx
+import React from "react";
+import { useWindowScroll } from "@better-hooks/window";
+
+const MyComponent: React.FC = () => {
+  // Updates when scrolling
+  const [x, y] = useWindowScroll()
+
+  return (
+    // ...
+  )
+}
+
+```
+
+---
+
+#### useWindowFocus
+
+```tsx
+import React from "react";
+import { useWindowFocus } from "@better-hooks/window";
+
+const MyComponent: React.FC = () => {
+  // Updates when user leave our page
+  const focus = useWindowFocus()
+
+  useEffect(() => {
+    if(focus) {
+      // User is using our page
+    } else {
+      // User has minimized window or leaved our page to different tab
+    }
+  }, [focus])
+
+  return (
+    // ...
+  )
+}
+
+```

package.json

@@ -127,8 +127,5 @@
     "useDidUnmount",
     "useDidRender",
     "useWillUnmount"
-  ],
-  "dependencies": {
-    "@better-typed/react-lifecycle-hooks": "^1.0.5"
-  }
+  ]
 }

src/hooks/index.ts

@@ -1,2 +1,5 @@
+export * from "./use-document-event.hook";
 export * from "./use-window-event.hook";
+export * from "./use-window-focus.hook";
+export * from "./use-window-scroll.hook";
 export * from "./use-window-size.hook";

src/hooks/use-document-event.hook.ts

@@ -0,0 +1,37 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { isBrowser } from "utils";
+import { useIsomorphicEffect } from "./use-isomorphic-effect.hook";
+
+type EventHandler<T extends Event = Event> = (e: T) => void;
+
+type DocumentEventHook = {
+  <K extends keyof DocumentEventMap>(
+    event: K | [K, AddEventListenerOptions],
+    handler: EventHandler<DocumentEventMap[K]>,
+    dependencies?: any[],
+  ): void;
+};
+
+const unpackValue = <K extends keyof DocumentEventMap>(
+  event: K | [K, AddEventListenerOptions],
+): [K, AddEventListenerOptions] => {
+  if (typeof event === "string") {
+    return [event, {}];
+  }
+  return event;
+};
+
+export const useDocumentEvent: DocumentEventHook = (event, handler, dependencies = []) => {
+  useIsomorphicEffect(() => {
+    if (!isBrowser) return;
+
+    const [name, options] = unpackValue(event);
+    const documentOptions = typeof options === "object" ? options : {};
+
+    document.addEventListener(name, handler, documentOptions);
+    return () => {
+      document.removeEventListener(name, handler, documentOptions);
+    };
+  }, [JSON.stringify(event), ...dependencies]);
+};

src/hooks/use-isomorphic-effect.hook.ts

@@ -0,0 +1,8 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useLayoutEffect } from "react";
+
+import { isBrowser } from "utils";
+
+const effect = isBrowser ? useEffect : useLayoutEffect;
+
+export const useIsomorphicEffect = effect;

src/hooks/use-window-event.hook.ts

@@ -1,45 +1,37 @@
-import { useRef } from "react";
-import { useDidUpdate, useWillUnmount } from "@better-typed/react-lifecycle-hooks";
+/* eslint-disable react-hooks/exhaustive-deps */
 
-import { getIsClient } from "utils";
+import { isBrowser } from "utils";
+import { useIsomorphicEffect } from "./use-isomorphic-effect.hook";
 
 type EventHandler<T extends Event = Event> = (e: T) => void;
 
 type WindowEventHook = {
   <K extends keyof WindowEventMap>(
-    value: K | [K, AddEventListenerOptions],
+    event: K | [K, AddEventListenerOptions],
     handler: EventHandler<WindowEventMap[K]>,
     dependencies?: any[],
   ): void;
 };
 
 const unpackValue = <K extends keyof WindowEventMap>(
-  value: K | [K, AddEventListenerOptions],
+  event: K | [K, AddEventListenerOptions],
 ): [K, AddEventListenerOptions] => {
-  if (typeof value === "string") {
-    return [value, {}];
+  if (typeof event === "string") {
+    return [event, {}];
   }
-  return value;
+  return event;
 };
 
-export const useWindowEvent: WindowEventHook = (value, handler, dependencies = []) => {
-  const didUnmount = useRef(false);
-  useWillUnmount(() => {
-    didUnmount.current = true;
-  });
+export const useWindowEvent: WindowEventHook = (event, handler, dependencies = []) => {
+  useIsomorphicEffect(() => {
+    if (!isBrowser) return;
 
-  useDidUpdate(
-    () => {
-      const isClient = getIsClient();
-      if (!isClient) return;
+    const [name, options] = unpackValue(event);
+    const windowOptions = typeof options === "object" ? options : {};
 
-      const [name, options] = unpackValue(value);
-      const windowOptions = typeof options === "object" ? options : {};
-
-      window.addEventListener(name, handler, windowOptions);
-      return () => window.removeEventListener(name, handler, windowOptions);
-    },
-    [JSON.stringify(value), ...dependencies],
-    true,
-  );
+    window.addEventListener(name, handler, windowOptions);
+    return () => {
+      window.removeEventListener(name, handler, windowOptions);
+    };
+  }, [JSON.stringify(event), ...dependencies]);
 };

src/hooks/use-window-focus.hook.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+import { isBrowser } from "utils";
+import { useDocumentEvent } from "./use-document-event.hook";
+import { useWindowEvent } from "./use-window-event.hook";
+
+export type FocusType = boolean;
+
+const getState = () => (isBrowser ? document.visibilityState === "visible" : false);
+
+export const useWindowFocus = (): FocusType => {
+  const [focus, setFocus] = useState(getState);
+
+  useDocumentEvent("visibilitychange", () => setFocus(true));
+  useWindowEvent("focus", () => setFocus(true));
+  useWindowEvent("blur", () => setFocus(false));
+
+  return focus;
+};

src/hooks/use-window-scroll.hook.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import { isBrowser } from "utils";
+import { useWindowEvent } from "./use-window-event.hook";
+
+export type ScrollXType = number;
+export type ScrollYType = number;
+export type UseWindowScrollType = [ScrollXType, ScrollYType];
+
+const getPosition = () => [isBrowser ? window.screenX : 0, isBrowser ? window.scrollY : 0];
+
+export const useWindowScroll = () => {
+  const [values, setValues] = useState(getPosition);
+
+  useWindowEvent(["scroll", { capture: false, passive: true }], () => {
+    setValues(getPosition);
+  });
+
+  return values;
+};

src/hooks/use-window-size.hook.ts

@@ -1,26 +1,24 @@
 import { useState } from "react";
 
-import { getIsClient } from "utils";
+import { isBrowser } from "utils";
 import { useWindowEvent } from "./use-window-event.hook";
 
 export type WindowWidthType = number;
 export type WindowHeightType = number;
-
 export type UseWindowSizeType = [WindowWidthType, WindowHeightType];
 
-export const useWindowSize = (onResize?: (size: UseWindowSizeType) => void) => {
-  const isClient = getIsClient();
-
-  const getSize = (): UseWindowSizeType => [
-    isClient ? window.innerWidth : 0,
-    isClient ? window.innerHeight : 0,
-  ];
+const getSize = (): UseWindowSizeType => [
+  isBrowser ? window.innerWidth : 0,
+  isBrowser ? window.innerHeight : 0,
+];
 
+export const useWindowSize = (onResize?: (size: UseWindowSizeType) => void) => {
   const [windowSize, setWindowSize] = useState<UseWindowSizeType>(getSize);
 
   const handleResize = () => {
-    setWindowSize(getSize());
-    onResize?.(getSize());
+    const size = getSize();
+    setWindowSize(size);
+    onResize?.(size);
   };
 
   useWindowEvent("resize", handleResize);

src/utils/window.utils.ts

@@ -1,7 +1 @@
-export const getIsClient = () => {
-  try {
-    return !!window.addEventListener;
-  } catch (err) {
-    return false;
-  }
-};
+export const isBrowser = typeof window !== "undefined";