[IMPL] useDocumentVisibility hook

Author: nDriaDev

apps/react-tools-demo/scripts/generateMarkdown.js

@@ -247,7 +247,8 @@ function buildHooksUtilsMarkdownObject(file) {
 		if(depuratedLine.startsWith("__") || depuratedLine.startsWith("**")) {
 			const titleDescription = depuratedLine.split(":");
 			obj.title = titleDescription[0].substring(3, titleDescription[0].length-3);
-			obj.description = titleDescription[1].trim();
+			titleDescription.shift();
+			obj.description = titleDescription.join(":").trim();
 			obj.description = obj.description.charAt(0).toUpperCase() + obj.description.substring(1);
 		}
 	});

apps/react-tools-demo/src/components/hooks/useDocumentVisibility/UseDocumentVisibility.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { useDocumentVisibility } from "../../../../../../packages/react-tools/src"
+
+/**
+The component tracks every document visibility status change and display them on screen with date they taking place. Minimize window or change tab to show them.
+ */
+export const UseDocumentVisibility = () => {
+	const status = useDocumentVisibility();
+	const [messages, setMessages] = useState <{ status: DocumentVisibilityState, date: string }[]>([]);
+
+	useEffect(() => {
+		setMessages(m => ([...m, {status: status, date: new Date().toLocaleTimeString()}]))
+	}, [status])
+
+	return (<div>
+		<h3>Status:</h3>
+		{
+			messages.map(el => (
+				<p key={el.date}>{el.date}: {el.status}</p>
+			))
+		}
+	</div>);
+}

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

@@ -54,7 +54,8 @@ export const COMPONENTS = [
 			"useActiveElement",
 			"useTimeout",
 			"useInterval",
-			"useTextSelection"
+			"useTextSelection",
+			"useDocumentVisibility"
 		]
 	],
 	//UTILS

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

@@ -1,5 +1,5 @@
 # useTextSelection
-Hook to track text selection and its size.
+Hook to track text selection. Refers to [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection).
 
 ## Usage
 

packages/react-tools/README.md

@@ -65,7 +65,7 @@
 	- [x] useTimeout
 	- [x] useInterval
 	- [x] useTextSelection
-	- [ ] useDocumentVisibility
+	- [x] useDocumentVisibility
 	- [ ] useCoptyToClipboard
 	- [ ] useColorScheme
 	- [ ] useTitle (change document.title but also document.head.title nodeElement)

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

@@ -35,4 +35,5 @@ export { useThrottle } from './useThrottle';
 export { useActiveElement } from './useActiveElement';
 export { useTimeout } from './useTimeout';
 export { useInterval } from './useInterval';
-export { useTextSelection } from './useTextSelection';
+export { useTextSelection } from './useTextSelection';
+export { useDocumentVisibility } from './useDocumentVisibility';

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

@@ -0,0 +1,20 @@
+import { useCallback } from "react";
+import { useSyncExternalStore } from "."
+
+/**
+ * **`useDocumentVisibility`**: Hook to track document visibility. Refers to [Document VisibilityState](https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState).
+ * @returns {DocumentVisibilityState} documentVisibility
+ */
+export const useDocumentVisibility = (): DocumentVisibilityState => {
+	return useSyncExternalStore(
+		useCallback(notif => {
+			document.addEventListener("visibilitychange", notif);
+			return () => {
+				document.removeEventListener("visibilitychange", notif);
+			}
+		}, []),
+		useCallback(() => {
+			return document.visibilityState;
+		}, [])
+	);
+}

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

@@ -3,7 +3,7 @@ import { TextSelection } from "../models";
 import { isDeepEqual, useSyncExternalStore } from "..";
 
 /**
- * **`useTextSelection`**: Hook to track text selection and its size.
+ * **`useTextSelection`**: Hook to track text selection. Refers to [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection).
  * @param {Object} param - object with selection properties
  * @param {RefObject<HTMLElement> | HTMLElement} [param.target] - element in which allow selection. Default is _document.body_.
  * @param {(evt: Event) => void} [param.onStart] - function to execute when selection starts.

packages/react-tools/src/index.ts

@@ -44,7 +44,8 @@ export {
 	useActiveElement,
 	useTimeout,
 	useInterval,
-	useTextSelection
+	useTextSelection,
+	useDocumentVisibility
 } from './hooks'
 
 export {