[ADD] useTitle hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useTitle/UseTitle.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useEffect } from "react";
+import { useTitle } from "../../../../../../packages/react-tools/src"
+
+/**
+First, in a variable outside the component is kept track of the page title. The _useTitle_ hook is invoked in the component with the _title_ __Title 1__ parameter and the returned _setTitle_ function is used. After 3 seconds the title is changed with the _setTitle_ function to _title_ __Title 2__.
+
+When the component is unmounted, the title saved in the variable outside the component is set as the title.
+ */
+const previousTitle = useTitle()[0]();
+
+export const UseTitle = () => {
+	const [,setTitle] = useTitle("Title 1");
+
+	useEffect(() => {
+		const id = setTimeout(() => {
+			setTitle("Title 2");
+		}, 3000);
+		return () => {
+			clearTimeout(id);
+			setTitle(previousTitle);
+		}
+	}, [setTitle]);
+}

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

@@ -58,7 +58,8 @@ export const COMPONENTS = [
 			"useDocumentVisibility",
 			"useClipboard",
 			"useMediaQuery",
-			"useColorScheme"
+			"useColorScheme",
+			"useTitle"
 		]
 	],
 	//UTILS

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

@@ -14,7 +14,8 @@ export const UseColorScheme = () => {
 
 	return (
 		<div className="container-themed" data-color={value}>
-			<button onClick={()=>update(value === "dark" ? "light" : "dark")}>Change color</button>
+			<p>Current color-scheme is: {value}</p>
+			<button onClick={() => update(value === "dark" ? "light" : "dark")}>Change color</button>
 		</div>
 	);
 }

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

@@ -0,0 +1,44 @@
+# useTitle
+Hook to handling app page title. It works _outside Component_ also and it returns array of two functions to read and write title.
+
+## Usage
+
+```tsx
+const previousTitle = useTitle()[0]();
+
+export const UseTitle = () => {
+	const [,setTitle] = useTitle("Title 1");
+
+	useEffect(() => {
+		const id = setTimeout(() => {
+			setTitle("Title 2");
+		}, 3000);
+		return () => {
+			clearTimeout(id);
+			setTitle(previousTitle);
+		}
+	}, [setTitle]);
+}
+```
+
+> First, in a variable outside the component is kept track of the page title. The _useTitle_ hook is invoked in the component with the _title_ __Title 1__ parameter and the returned _setTitle_ function is used. After 3 seconds the title is changed with the _setTitle_ function to _title_ __Title 2__. When the component is unmounted, the title saved in the variable outside the component is set as the title.
+
+
+## API
+
+```tsx
+useTitle (title?: string): [() => string, (title: string) => void] 
+```
+
+> ### Params
+>
+> - __title?__: _string_
+>
+
+> ### Returns
+>
+> __array__
+> - __Array__:  
+>     - _() => string_  
+>     - _(title: string) => void_  
+>

packages/react-tools/README.md

@@ -26,6 +26,7 @@
 	- [x] useLayoutEffectOnce
 	- [x] useRerender
 	- [x] useIsMounted
+	- [ ] useInsertionEffect (polyfill???)
 	- [ ] useDeferredValue (polyfill - an idea can be use setTimeout inside useEffect)
 
 - __PERFORMANCE__
@@ -40,19 +41,19 @@
 	- [x] useEventListener
 	- [x] useEventDispatcher
 	- [x] usePerformAction
-	- [ ] useIntersectionObserver
-	- [ ] useMutationObserver
-	- [ ] useKeysEvents
-	- [ ] useSize (=useMeasuree?)
 	- [ ] useHover
 	- [ ] useResponsive
 	- [ ] useClickOutside
+	- [ ] useSize (=useMeasuree?)
 	- [ ] useScrollIntoView
+	- [ ] useKeysEvents
 	- [ ] useMouse
+	- [ ] useLongPress
+	- [ ] useIntersectionObserver
+	- [ ] useInViewport (with area ratio of element: check if is equal to useIntersectionObserver)
+	- [ ] useMutationObserver
 	- [ ] useInfiniteScroll
 	- [ ] useDragAndDrop (check for mobile usage)
-	- [ ] useInViewport (with area ratio of element: check if is equal to useIntersectionObserver)
-	- [ ] useLongPress
 
 
 - __API DOM__
@@ -68,16 +69,20 @@
 	- [x] useClipboard
 	- [x] useMediaQuery
 	- [x] useColorScheme
-	- [ ] useTitle (change document.title but also document.head.title nodeElement)
-	- [ ] useFetch
-	- [ ] useAsync
-	- [ ] useImageOnLoad
-	- [ ] useMediaStream
-	- [ ] useScreenShare
+	- [x] useTitle (change document.title but also document.head.title nodeElement)
+	- [ ] useId (polyfill???)
 	- [ ] useNetwork
 	- [ ] useOnline
 	- [ ] useFullscreen (check browser compatibility)
 	- [ ] useLanguage (?)
+	- [ ] useOrientation
+	- [ ] useScreenShare
+	- [ ] useFetch (with suspense ???)
+	- [ ] useAsync
+	- [ ] useImageOnLoad
+	- [ ] useMediaStream
+	- [ ] usePinchZoom
+	- [ ] useObservable — tracks latest value of an Observable
 
 - __UTILS__
 	- [x] isShallowEqual
@@ -86,11 +91,18 @@
 	- [x] isTouchEvent
 	- [x] isClient
 	- [x] isAsync
+	- [ ] lazy: lazy react-like customized
+	- [ ] fetch-client (???ARTS-like)
 
 - __COMPONENT__
-	- [ ] Show (component to render or not a component by a condition)
+	- [ ] Show component to render or not a component by a condition. Props: when, fallback, keyed. Keyed is a boolean and needs to avoid rerenders children when it is a function.
+	- [ ] Switch and Match components with fallback and when props
+	- [ ] For: A referentially keyed loop with efficient updating of only changed items. The callback takes the current item as the first argument
+	- [ ] Index: Non-keyed list iteration (rendered nodes are keyed to an array index). This is useful when there is no conceptual key, like if the data consists of primitives and it is the index that is fixed rather than the value.
 	- [ ] RestrictedRoute (maybe)
 	- [ ] ErrorBoundary (??)
+	- [ ] Suspense: Suspence compontent react-like for async component
+	- [ ] Dynamic: This component lets you insert an arbitrary Component or tag and passes the props through to it.
 
 ## ESlint configuration
 To validate dependencies of custom hooks like `useMemoCompare`, configure `exhaustive-deps` with the `additionalHooks` option

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

@@ -39,4 +39,5 @@ export { useTextSelection } from './useTextSelection';
 export { useDocumentVisibility } from './useDocumentVisibility';
 export { useClipboard } from './useClipboard';
 export { useMediaQuery } from './useMediaQuery';
-export { useColorScheme } from './useColorScheme';
+export { useColorScheme } from './useColorScheme';
+export { useTitle } from './useTitle'

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

@@ -0,0 +1,25 @@
+import { useLayoutEffect } from "react";
+
+const setTitle = (title: string) => {
+	document.title = title;
+};
+
+const getTitle = () => document.title;
+
+/**
+ * **`useTitle`**: Hook to handling app page title. It works _outside Component_ also and it returns array of two functions to read and write title.
+ * @param {string} [title]
+ * @returns {[() => string, (title: string) => void]} array
+ */
+export const useTitle = (title?: string): [() => string, (title: string) => void] => {
+	title && (document.title = title);
+	try {
+		useLayoutEffect(() => {
+			title && (document.title = title);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [])
+	} catch (error) {
+		return [getTitle, setTitle];
+	}
+	return [getTitle, setTitle];
+}

packages/react-tools/src/index.ts

@@ -48,7 +48,8 @@ export {
 	useDocumentVisibility,
 	useClipboard,
 	useMediaQuery,
-	useColorScheme
+	useColorScheme,
+	useTitle
 } from './hooks'
 
 export {