main 🧊 add use window focus, add use active element

Author: debabin

src/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './useActiveElement/useActiveElement';
 export * from './useAsync/useAsync';
 export * from './useBattery/useBattery';
 export * from './useBoolean/useBoolean';
@@ -96,6 +97,7 @@ export * from './useToggle/useToggle';
 export * from './useUnmount/useUnmount';
 export * from './useWebSocket/useWebSocket';
 export * from './useWindowEvent/useWindowEvent';
+export * from './useWindowFocus/useWindowFocus';
 export * from './useWindowScroll/useWindowScroll';
 export * from './useWindowSize/useWindowSize';
 export * from './useWizard/useWizard';

src/hooks/useActiveElement/useActiveElement.demo.tsx

@@ -0,0 +1,22 @@
+import { useActiveElement } from './useActiveElement';
+
+const Demo = () => {
+  const activeElement = useActiveElement();
+  const activeElementId = activeElement?.dataset?.id ?? 'null';
+
+  return (
+    <>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5px' }}>
+        {Array.from({ length: 6 }, (_, i) => i + 1).map((id) => (
+          <input key={id} type='text' data-id={String(id)} placeholder={String(id)} />
+        ))}
+      </div>
+
+      <p>
+        current active element: <code>{activeElementId}</code>
+      </p>
+    </>
+  );
+};
+
+export default Demo;

src/hooks/useActiveElement/useActiveElement.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+
+import { useMutationObserver } from '../useMutationObserver/useMutationObserver';
+
+/**
+ * @name useActiveElement
+ * @description - Hook that returns the active element
+ * @category Elements
+ *
+ * @returns {ActiveElement | null} The active element
+ *
+ * @example
+ * const activeElement = useActiveElement();
+ */
+export const useActiveElement = <ActiveElement extends HTMLElement>() => {
+  const [activeElement, setActiveElement] = useState<ActiveElement | null>(null);
+
+  useEffect(() => {
+    const onActiveElementChange = () =>
+      setActiveElement(document?.activeElement as ActiveElement | null);
+
+    window.addEventListener('focus', onActiveElementChange, true);
+    window.addEventListener('blur', onActiveElementChange, true);
+    return () => {
+      window.removeEventListener('focus', onActiveElementChange);
+      window.removeEventListener('blur', onActiveElementChange);
+    };
+  });
+
+  useMutationObserver(
+    document as any,
+    (mutations) => {
+      mutations
+        .filter((mutation) => mutation.removedNodes.length)
+        .map((mutation) => Array.from(mutation.removedNodes))
+        .flat()
+        .forEach((node) => {
+          if (node === activeElement)
+            setActiveElement(document?.activeElement as ActiveElement | null);
+        });
+    },
+    {
+      childList: true,
+      subtree: true
+    }
+  );
+
+  return activeElement;
+};

src/hooks/useDocumentVisibility/useDocumentVisibility.demo.tsx

@@ -1,28 +1,28 @@
+import { useEffect, useState } from 'react';
+
 import { useDidUpdate } from '../useDidUpdate/useDidUpdate';
+import { useTimer } from '../useTimer/useTimer';
 
 import { useDocumentVisibility } from './useDocumentVisibility';
 
+const START_MESSAGE = '💡 Minimize the page or switch tab then return';
+
 const Demo = () => {
+  const [message, setMessage] = useState(START_MESSAGE);
   const documentVisibility = useDocumentVisibility();
 
-  useDidUpdate(() => {
-    console.log(`Current document visibility state: ${documentVisibility}`);
+  const timer = useTimer(3000, () => {
+    setMessage(START_MESSAGE);
+  });
 
+  useDidUpdate(() => {
     if (documentVisibility === 'visible') {
-      alert(`Current document visibility state: ${documentVisibility}`);
+      setMessage('🎉 Welcome back!');
+      timer.start();
     }
   }, [documentVisibility]);
 
-  return (
-    <div>
-      <p>
-        Switch to another tab and then return here
-        <br />
-        <br />
-        Visibility status: <code>{documentVisibility}</code>
-      </p>
-    </div>
-  );
+  return <p>{message}</p>;
 };
 
 export default Demo;

src/hooks/useWindowFocus/useWindowFocus.demo.tsx

@@ -0,0 +1,14 @@
+import { useWindowFocus } from './useWindowFocus';
+
+const Demo = () => {
+  const windowFocused = useWindowFocus();
+
+  return (
+    <p>
+      {windowFocused && '💡 Click somewhere outside of the document to unfocus.'}
+      {!windowFocused && 'ℹ Tab is unfocused'}
+    </p>
+  );
+};
+
+export default Demo;

src/hooks/useWindowFocus/useWindowFocus.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * @name useWindowFocus
+ * @description - Hook that provides the current focus state of the window
+ * @category Elements
+ *
+ * @returns {boolean} The current focus state of the window
+ *
+ * @example
+ * const focused = useWindowFocus();
+ */
+export const useWindowFocus = () => {
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    const onFocus = () => setFocused(true);
+    const onBlur = () => setFocused(false);
+
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+    };
+  });
+
+  return focused;
+};

src/hooks/useWindowSize/useWindowSize.ts

@@ -19,7 +19,7 @@ export interface UseWindowSizeReturn {
 /**
  * @name useWindowSize
  * @description - Hook that manages a window size
- * @category Browser
+ * @category Elements
  *
  * @param {number} [params.initialWidth=Number.POSITIVE_INFINITY] The initial window width
  * @param {number} [params.initialHeight=Number.POSITIVE_INFINITY] The initial window height