[IMPL] useRaf hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useRaf/UseRaf.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react"
+import { useRaf, useResizeObserver } from "../../../../../../packages/react-tools/src";
+
+/**
+The component renders a textarea element and when it is resized, updates __state__ variable inside function __start__ returned from _useRaf_ hook.
+ */
+export const UseRaf = () => {
+	const [state, setState] = useState({ width: 0, height: 0 });
+	const [start] = useRaf((timer: number, dim: DOMRectReadOnly) => {
+		setState({width:dim.width, height: dim.height})
+	});
+	const [refCb] = useResizeObserver<HTMLTextAreaElement>(
+		(entries: ResizeObserverEntry[]) => {
+			start(entries[0].contentRect);
+		}
+	);
+
+	return <div>
+		<p>{"Textarea dimension: " + JSON.stringify(state)}</p>
+		<textarea ref={refCb} rows={3}></textarea>
+	</div>
+}

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

@@ -37,6 +37,7 @@ export const COMPONENTS = [
 			"useMemoDeepCompare",
 			"useCallbackCompare",
 			"useCallbackDeepCompare",
+			"useRaf",
 			"useLazyRef",
 			"useId"
 		],

…o/src/markdown/useRequestIdleCallback.md …react-tools-demo/src/markdown/useIdle.mdapps/react-tools-demo/src/markdown/useRequestIdleCallback.md renamed to apps/react-tools-demo/src/markdown/useIdle.md apps/react-tools-demo/src/markdown/useRequestIdleCallback.md renamed to apps/react-tools-demo/src/markdown/useIdle.md

@@ -1,13 +1,13 @@
-# useRequestIdleCallback
-Hook to use [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) in React. The __options__ parameter differs from _IdleRequestOptions_ type: it adds the possibility to pass another property __unsupportedBehavior__ to specify what do if requestIdleCallback is not supported.
+# useIdle
+Hook to invoke a callback when the browser is idle. Refer to [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) in React. The __options__ parameter differs from _IdleRequestOptions_ type: it adds the possibility to pass another property __unsupportedBehavior__ to specify what do if requestIdleCallback is not supported.
 
 ## Usage
 
 ```tsx
-export const UseRequestIdleCallback = () => {
+export const UseIdle = () => {
 	const [iterations, setIterations] = useState(0);
 	const [log, setLog] = useState("");
-	const [invoke] = useRequestIdleCallback(() => setLog("RequestIdleCallback executed"));
+	const [invoke] = useIdle(() => setLog("RequestIdleCallback executed"));
 
 	const start = async() => {
 		invoke();
@@ -31,14 +31,14 @@ export const UseRequestIdleCallback = () => {
 > The component has:
 > - a __iterations__ variable of type string.
 > - a __log__ variable of type string.
-> - a function __invoke__ returned from _useRequestIdleCallback_ hook, initialized with a cb that update __log__ variable with message _"RequestIdleCallback executed"_.
+> - a function __invoke__ returned from _useIdle_ hook, initialized with a cb that update __log__ variable with message _"RequestIdleCallback executed"_.
 > - a button start that when clicked executes __start__ function that executes __invoke__ function and updates __iterations__ variable inside a loop with iteration index.
 
 
 ## API
 
 ```tsx
-useRequestIdleCallback (cb: (deadline?: IdleDeadline | DOMHighResTimeStamp | void) => void, opts?: {timeout: number , unsupportedBehavior?: "animationFrame" | "timeout" | "immediatly" }): [() => void, () => void] 
+useIdle (cb: (deadline?: IdleDeadline | DOMHighResTimeStamp | void) => void, opts?: {timeout: number , unsupportedBehavior?: "animationFrame" | "timeout" | "immediatly" }): [() => void, () => void] 
 ```
 
 > ### Params

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

@@ -0,0 +1,46 @@
+# useRaf
+Hook to execute a callback function with _requestAnimationFrame_ to optimize performance. Refer to (requestAnimationFrame)[https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame].
+
+## Usage
+
+```tsx
+export const UseRaf = () => {
+	const [state, setState] = useState({ width: 0, height: 0 });
+	const [start] = useRaf((timer: number, dim: DOMRectReadOnly) => {
+		setState({width:dim.width, height: dim.height})
+	});
+	const [refCb] = useResizeObserver<HTMLTextAreaElement>(
+		(entries: ResizeObserverEntry[]) => {
+			start(entries[0].contentRect);
+		}
+	);
+
+	return <div>
+		<p>{"Textarea dimension: " + JSON.stringify(state)}</p>
+		<textarea ref={refCb} rows={3}></textarea>
+	</div>
+}
+```
+
+> The component renders a textarea element and when it is resized, updates __state__ variable inside function __start__ returned from _useRaf_ hook.
+
+
+## API
+
+```tsx
+useRaf <T extends unknown[]>(cb: (timer:number, ...args: T) => void): [(...args: T)=>void, ()=>void] 
+```
+
+> ### Params
+>
+> - __cb__: _(timer:number, ...args: T) => void_  
+ callback to execute prior to the next repaint.
+>
+
+> ### Returns
+>
+> __results__: array with __start__ function to invoke _requestAnimationFrame_ and __cancel__ function to invoke _cancelAnimationFrame_.
+> - __Array__:  
+>     - _(...args: T)=>void_  
+>     - _()=>void_  
+>

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

@@ -51,4 +51,5 @@ export { useIsOnline } from './useIsOnline';
 export { useResizeObserver } from './useResizeObserver';
 export { useIntersectionObserver } from './useIntersectionObserver';
 export { useMutationObserver } from './useMutationObserver';
-export { useIdle } from './useIdle';
+export { useIdle } from './useIdle';
+export { useRaf } from './useRaf';

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

@@ -0,0 +1,19 @@
+import { useCallback, useRef } from "react"
+
+/**
+ * **`useRaf`**: Hook to execute a callback function with _requestAnimationFrame_ to optimize performance. Refer to (requestAnimationFrame)[https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame].
+ * @param {(timer:number, ...args: T) => void} cb -  callback to execute prior to the next repaint.
+ * @returns {[(...args: T)=>void, ()=>void]} results - array with __start__ function to invoke _requestAnimationFrame_ and __cancel__ function to invoke _cancelAnimationFrame_.
+ */
+export const useRaf = <T extends unknown[]>(cb: (timer:number, ...args: T) => void): [(...args: T)=>void, ()=>void] => {
+	const idRequest = useRef<number>();
+
+	return [
+		useCallback((...args: T) => {
+			idRequest.current = requestAnimationFrame((timer) => cb(timer, ...args));
+		}, [cb]),
+		useCallback(() => {
+			!!idRequest.current && cancelAnimationFrame(idRequest.current)
+		}, [])
+	]
+}

packages/react-tools/src/index.ts

@@ -65,7 +65,8 @@ export {
 	useResizeObserver,
 	useIntersectionObserver,
 	useMutationObserver,
-	useIdle
+	useIdle,
+	useRaf
 } from './hooks'
 
 export {