[IMPL] useTimeout and useInterval hooks

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useInterval/UseInterval.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react"
+import { useInterval } from "../../../../../../packages/react-tools/src";
+
+/**
+The component has:
+- A _count_ state initialized to _0_.
+- A _interval_ state initialized to _1000_.
+- A _useInterval_ that receives a _callback_ to update _count_ by 1 and _interval_ as time to interval execution.
+- Two p tag to diplay current _count_ and _interval_ variable.
+- A button to execute _apply_ function returned from _useInterval_.
+- A button to increment by 1000 _interval_ state.
+- A button to restore _interval_ state to 1000.
+- A button to execute _clear_ function returned from _useInterval_.
+- A button to execute _applyPromisy_ function returned from _useInterval_ tha after _count_ state update, restore _interval_ state to 1000.
+ */
+export const UseInterval = () => {
+	const [count, setCount] = useState(0);
+	const [interval, setInterval] = useState(1000);
+	const [apply, clear, applyPromisy] = useInterval(
+		() => setCount(c => c + 1),
+		interval
+	)
+
+	return (
+		<div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<p>Count: {count}</p>
+			<p>interval: {interval}</p>
+			<div style={{ display: "grid", gridTemplateRows: "auto auto", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+				<button onClick={apply}>Increment count</button>
+				<button onClick={clear}>Clear Interval</button>
+				<button onClick={async()=>applyPromisy().then(()=>setInterval(1000))}>Increment promisy</button>
+				<button onClick={() => setInterval(d => d + 1000)}>Increment interval</button>
+				<button onClick={() => setInterval(() => 1000)}>Clear interval</button>
+			</div>
+		</div>
+	);
+}

apps/react-tools-demo/src/components/hooks/useTimeout/UseTimeout.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react"
+import { useTimeout } from "../../../../../../packages/react-tools/src";
+
+/**
+The component has:
+- A _count_ state initialized to _0_.
+- A _delay_ state initialized to _1000_.
+- A _useTimeout_ that receives a _callback_ to update _count_ by 1 and _delay_ as time to delay execution.
+- Two p tag to diplay current _count_ and _delay_ variable.
+- A button to execute _apply_ function returned from _useTimeout_.
+- A button to increment by 1000 _delay_ state.
+- A button to restore _delay_ state to 1000.
+- A button to execute _clear_ function returned from _useTimeout_.
+- A button to execute _applyPromisy_ function returned from _useTimeout_ tha after _count_ state update, restore _delay_ state to 1000.
+ */
+export const UseTimeout = () => {
+	const [count, setCount] = useState(0);
+	const [delay, setDelay] = useState(1000);
+	const [apply, clear, applyPromisy] = useTimeout(
+		() => setCount(c => c + 1),
+		delay
+	)
+
+	return (
+		<div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<p>Count: {count}</p>
+			<p>Delay: {delay}</p>
+			<div style={{ display: "grid", gridTemplateRows: "auto auto", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+				<button onClick={apply}>Increment count</button>
+				<button onClick={clear}>Clear Timeout</button>
+				<button onClick={async()=>applyPromisy().then(()=>setDelay(1000))}>Increment promisy</button>
+				<button onClick={() => setDelay(d => d + 1000)}>Increment delay</button>
+				<button onClick={() => setDelay(() => 1000)}>Clear delay</button>
+			</div>
+		</div>
+	);
+}

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

@@ -51,7 +51,9 @@ export const COMPONENTS = [
 			"useScript",
 			"useDebounce",
 			"useThrottle",
-			"useActiveElement"
+			"useActiveElement",
+			"useTimeout",
+			"useInterval"
 		]
 	],
 	//UTILS

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

@@ -18,7 +18,7 @@ export const UseActiveElement = () => {
 }
 ```
 
-> The component has 3 HTML elements: a _span_ element with __tabindex__ attribute, a _p_ element with __tabindex__ attribute and a _button_ element. It renders also the current active element. If element focused changes, active element displayed will change.
+> The component has 3 HTML elements: a _span_ element with __tabindex__ attribute, a _p_ element with __tabindex__ attribute and a _button_ element. It renders also the current _active element_. If element focused changes, _active element_ displayed will change.
 
 
 ## API

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

@@ -0,0 +1,62 @@
+# useInterval
+Hook to handle setInterval timer function with the possibility to clear and promisify execution.
+
+## Usage
+
+```tsx
+export const UseInterval = () => {
+	const [count, setCount] = useState(0);
+	const [interval, setInterval] = useState(1000);
+	const [apply, clear, applyPromisy] = useInterval(
+		() => setCount(c => c + 1),
+		interval
+	)
+
+	return (
+		<div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<p>Count: {count}</p>
+			<p>interval: {interval}</p>
+			<div style={{ display: "grid", gridTemplateRows: "auto auto", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+				<button onClick={apply}>Increment count</button>
+				<button onClick={clear}>Clear Interval</button>
+				<button onClick={async()=>applyPromisy().then(()=>setInterval(1000))}>Increment promisy</button>
+				<button onClick={() => setInterval(d => d + 1000)}>Increment interval</button>
+				<button onClick={() => setInterval(() => 1000)}>Clear interval</button>
+			</div>
+		</div>
+	);
+}
+```
+
+> The component has:
+> - A _count_ state initialized to _0_.
+> - A _interval_ state initialized to _1000_.
+> - A _useInterval_ that receives a _callback_ to update _count_ by 1 and _interval_ as time to interval execution.
+> - Two p tag to diplay current _count_ and _interval_ variable.
+> - A button to execute _apply_ function returned from _useInterval_.
+> - A button to increment by 1000 _interval_ state.
+> - A button to restore _interval_ state to 1000.
+> - A button to execute _clear_ function returned from _useInterval_.
+> - A button to execute _applyPromisy_ function returned from _useInterval_ tha after _count_ state update, restore _interval_ state to 1000.
+
+
+## API
+
+```tsx
+useInterval <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay: number): [(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>] 
+```
+
+> ### Params
+>
+> - __callback__: _(...args: unknown[])=>void_  
+Function to call when the timer elapses.
+> - __delay__: _number_  
+The number of milliseconds to wait before calling the `callback`.
+>
+
+> ### Returns
+>
+> __- array: first element is the function to call setInterval; second element is the function to clearInterval; thrid element promisify setInterval.__
+> - __Array__:  
+>     - _(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>_  
+>

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

@@ -0,0 +1,62 @@
+# useTimeout
+Hook to handle setTimeout timer function with the possibility to clear and promisify execution.
+
+## Usage
+
+```tsx
+export const UseTimeout = () => {
+	const [count, setCount] = useState(0);
+	const [delay, setDelay] = useState(1000);
+	const [apply, clear, applyPromisy] = useTimeout(
+		() => setCount(c => c + 1),
+		delay
+	)
+
+	return (
+		<div style={{ display: "grid", gridTemplateRows: "auto auto auto", justifyContent: "center", gap: 50 }}>
+			<p>Count: {count}</p>
+			<p>Delay: {delay}</p>
+			<div style={{ display: "grid", gridTemplateRows: "auto auto", gridTemplateColumns: "auto auto auto", justifyContent: "center", gap: 50 }}>
+				<button onClick={apply}>Increment count</button>
+				<button onClick={clear}>Clear Timeout</button>
+				<button onClick={async()=>applyPromisy().then(()=>setDelay(1000))}>Increment promisy</button>
+				<button onClick={() => setDelay(d => d + 1000)}>Increment delay</button>
+				<button onClick={() => setDelay(() => 1000)}>Clear delay</button>
+			</div>
+		</div>
+	);
+}
+```
+
+> The component has:
+> - A _count_ state initialized to _0_.
+> - A _delay_ state initialized to _1000_.
+> - A _useTimeout_ that receives a _callback_ to update _count_ by 1 and _delay_ as time to delay execution.
+> - Two p tag to diplay current _count_ and _delay_ variable.
+> - A button to execute _apply_ function returned from _useTimeout_.
+> - A button to increment by 1000 _delay_ state.
+> - A button to restore _delay_ state to 1000.
+> - A button to execute _clear_ function returned from _useTimeout_.
+> - A button to execute _applyPromisy_ function returned from _useTimeout_ tha after _count_ state update, restore _delay_ state to 1000.
+
+
+## API
+
+```tsx
+useTimeout <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay: number): [(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>] 
+```
+
+> ### Params
+>
+> - __callback__: _(...args: unknown[])=>void_  
+Function to call when the timer elapses.
+> - __delay__: _number_  
+The number of milliseconds to wait before calling the `callback`.
+>
+
+> ### Returns
+>
+> __- array: first element is the function to call setTimeout; second element is the function to clearTimeout; thrid element promisify setTimeout.__
+> - __Array__:  
+>     - _(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>_  
+>

packages/react-tools/README.md

@@ -26,6 +26,7 @@
 	- [x] useLayoutEffectOnce
 	- [x] useUpdate
 	- [x] useIsMounted
+	- [ ] useDeferredValue (polyfill - an idea can be use setTimeout inside useEffect)
 
 - __PERFORMANCE__
 	- [x] useCallbackCompare
@@ -53,16 +54,16 @@
 	- [ ] useDragAndDrop (check for mobile usage)
 	- [ ] useInViewport (with area ratio of element: check if is equal to useIntersectionObserver)
 	- [ ] useLongPress
-	- [ ] useDeferredValue (polyfill - an idea can be use setTimeout inside useEffect)
+
 
 - __API DOM__
 	- [x] usePublishSubscribe
 	- [x] useScript
 	- [x] useDebounce
 	- [x] useThrottle
 	- [x] useActiveElement
-	- [ ] useTimeout
-	- [ ] useInterval
+	- [x] useTimeout
+	- [x] useInterval
 	- [ ] useTextSelection
 	- [ ] useDocumentVisibility
 	- [ ] useCoptyToClipboard

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

@@ -32,4 +32,6 @@ export { useSyncExternalStore } from './useSyncExternalStore';
 export { useIsMounted } from './useIsMounted';
 export { useDebounce } from './useDebounce';
 export { useThrottle } from './useThrottle';
-export { useActiveElement } from './useActiveElement';
+export { useActiveElement } from './useActiveElement';
+export { useTimeout } from './useTimeout';
+export { useInterval } from './useInterval';

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

@@ -11,7 +11,7 @@ export const useActiveElement = ():Element|null => {
 	return useSyncExternalStore(
 		useCallback(notif => {
 			previousElem.current = document.activeElement;
-			const idTimeout:{id: number | NodeJS.Timeout} = { id: 0 };
+			const idTimeout: { id: number | NodeJS.Timeout } = { id: 0 };
 			const listener = (e: Event) => {
 				/**
 				 * INFO
@@ -33,6 +33,9 @@ export const useActiveElement = ():Element|null => {
 					notif();
 				}
 			}
+			if (typeof addEventListener === "undefined") {
+				throw Error("useActiveElement: hook works only in browser context.");
+			}
 			addEventListener("focusin", listener, true);
 			addEventListener("focusout", listener, true);
 

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

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef } from "react"
+
+/**
+ * **`useInterval`**: Hook to handle setInterval timer function with the possibility to clear and promisify execution.
+ * @param {(...args: unknown[])=>void} callback - Function to call when the timer elapses.
+ * @param {number} delay - The number of milliseconds to wait before calling the `callback`.
+ * @returns {[(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>]} - array: first element is the function to call setInterval; second element is the function to clearInterval; thrid element promisify setInterval.
+ */
+export const useInterval = <TArgs extends unknown[]>(callback: (...args: TArgs) => void, delay: number): [(...args: TArgs) => void, () => void, (...args: TArgs) => Promise<void>] => {
+	const idInterval = useRef<number | NodeJS.Timeout>();
+
+	const apply = useCallback((...args: TArgs): void => {
+		clearInterval(idInterval.current);
+		idInterval.current = setInterval(() => callback(...args), delay);
+	}, [callback, delay]);
+
+	const applyPromisify = useCallback((...args: TArgs): Promise<void> => {
+		clearInterval(idInterval.current);
+		return new Promise<void>(res => {
+			idInterval.current = setInterval(() => {
+				res(callback(...args));
+			}, delay);
+		})
+	}, [callback, delay]);
+
+	const clear = useCallback(() => {
+		clearInterval(idInterval.current);
+	}, []);
+
+	useEffect(() => {
+		clearInterval(idInterval.current);
+	}, []);
+
+	return [
+		apply,
+		clear,
+		applyPromisify
+	];
+}