[WIP] useActiveElement hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useActiveElement/UseActiveElement.tsx

@@ -0,0 +1,18 @@
+import { useActiveElement } from "../../../../../../packages/react-tools/src"
+
+/**
+DEMO
+ */
+export const UseActiveElement = () => {
+	const activeElement = useActiveElement();
+	console.log("render", activeElement?.tagName)
+
+	return (<>
+		<p>Active element is: {activeElement?.tagName}</p>
+		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<span tabIndex={0}>Span</span>
+			<p tabIndex={0}>P</p>
+			<button>Button</button>
+		</div>
+	</>)
+}

apps/react-tools-demo/src/constants/components.ts

@@ -44,13 +44,14 @@ export const COMPONENTS = [
 			"useEventListener",
 			"useEvents",
 			"useEventDispatcher",
-			"useDebounce",
-			"useThrottle"
 		],
 		//API DOM
 		[
 			"usePublishSubscribe",
-			"useScript"
+			"useScript",
+			"useDebounce",
+			"useThrottle",
+			"useActiveElement"
 		]
 	],
 	//UTILS

apps/react-tools-demo/src/markdown/isAsync.md

@@ -4,12 +4,12 @@ It detects if a function is asynchronous.
 ## API
 
 ```tsx
-isAsync <T extends unknown[], E = unknown>(fn: (...args: T)=> E | Promise<E>): boolean 
+isAsync <T extends unknown[], E = unknown>(fn: E | Promise<E> | ((...args: T)=> E | Promise<E>)): boolean 
 ```
 
 > ### Params
 >
-> - ____: _(...args: unknown[])=> Eìunknown | Promise<unknown>_
+> - ____: _(...args: unknown[])=> unknown | Promise<unknown>_
 >
 
 > ### Returns

apps/react-tools-demo/src/markdown/useActiveElement.md

@@ -0,0 +1,41 @@
+# useActiveElement
+Hook that returns activeElement and listen its changes.
+
+## Usage
+
+```tsx
+export const UseActiveElement = () => {
+	const activeElement = useActiveElement();
+
+	return (<>
+		<p>Active element is: {activeElement?.tagName}</p>
+		<div style={{ display: "grid", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<span tabIndex={0}>Span</span>
+			<p tabIndex={0}>P</p>
+			<button>Button</button>
+		</div>
+	</>)
+}
+```
+
+> DEMO
+
+
+## API
+
+```tsx
+useActiveElement ():Element|null 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> __activeELement__
+> - __Union of__:  
+>     - _Element_  
+>     - _null_  
+>

packages/react-tools/README.md

@@ -60,7 +60,7 @@
 	- [x] useScript
 	- [x] useDebounce
 	- [x] useThrottle
-	- [ ] useActiveElement
+	- [-] useActiveElement
 	- [ ] useTimeout
 	- [ ] useInterval
 	- [ ] useTextSelection

packages/react-tools/src/hooks/index.ts

@@ -31,4 +31,5 @@ export { useScript } from './useScript';
 export { useSyncExternalStore } from './useSyncExternalStore';
 export { useIsMounted } from './useIsMounted';
 export { useDebounce } from './useDebounce';
-export { useThrottle } from './useThrottle';
+export { useThrottle } from './useThrottle';
+export { useActiveElement } from './useActiveElement';

packages/react-tools/src/hooks/useActiveElement.ts

@@ -0,0 +1,30 @@
+import { useCallback, useRef } from "react";
+import { useSyncExternalStore } from ".";
+
+/**
+ * **`useActiveElement`**: Hook that returns activeElement and listen its changes.
+ * @returns {Element | null} activeELement
+ */
+export const useActiveElement = ():Element|null => {
+	const previousElem = useRef<Element | null>(null);
+
+	return useSyncExternalStore(
+		useCallback(notif => {
+			previousElem.current = document.activeElement;
+			const listener = () => notif();
+			addEventListener("focusin", listener, true);
+			addEventListener("focusout", listener, true);
+
+			return () => {
+				addEventListener("focusin", listener, true);
+				addEventListener("focusout", listener, true);
+				previousElem.current = null;
+			}
+		}, []),
+		useCallback(() => {
+			const elem = document.activeElement;
+			previousElem.current !== elem && (previousElem.current = elem);
+			return previousElem.current;
+		}, [])
+	)
+}

packages/react-tools/src/index.ts

@@ -40,7 +40,8 @@ export {
 	useSyncExternalStore,
 	useIsMounted,
 	useDebounce,
-	useThrottle
+	useThrottle,
+	useActiveElement
 } from './hooks'
 
 export {