[IMPL] useResizeObserver hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useResizeObserver/UseResizeObserver.tsx

@@ -0,0 +1,24 @@
+import { useState } from "react";
+import { useResizeObserver } from "../../../../../../packages/react-tools/src"
+
+/**
+The component renders a textarea element with a ref that receives callback returned from _useResizeObserver__ hook. There are also two button to disconnect and reconnect observer by functions returned from hook.
+
+Hook is initialized with a callback that verifies if textarea element has a width minor or major of 100 px amd set result into __state variable__. The __state variable__ value is displayed on screen.
+ */
+export const UseResizeObserver = () => {
+	const [state, setState] = useState(false);
+	const [refCb, disconnect, reconnect] = useResizeObserver<HTMLTextAreaElement>(
+		(entries: ResizeObserverEntry[]) => {
+			const result = entries[0].contentRect.width < 100;
+			result !== state && setState(result);
+		});
+
+	return <div>
+		<p>{"Has width < 100 px: " + state}</p>
+		<textarea ref={refCb} rows={3}></textarea>
+		<br/>
+		<button onClick={reconnect}>Reconnect</button>
+		<button onClick={disconnect}>Disconnect</button>
+	</div>
+}

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

@@ -51,7 +51,8 @@ export const COMPONENTS = [
 			"useResponsive",
 			"useClickOutside",
 			"useNetwork",
-			"useIsOnline"
+			"useIsOnline",
+			"useResizeObserver"
 		],
 		//API DOM
 		[

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

@@ -0,0 +1,37 @@
+# useResizeObserver
+Hook to use ResizeObserver. Refer to [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+
+## Usage
+
+```tsx
+export const UseResizeObserver = () => {
+	const refCb = useResizeObserver<HTMLTextAreaElement>((entries: ResizeObserverEntry[]) => { console.log("ciao") });
+
+	return <div>
+		<textarea ref={refCb} rows={3}></textarea>
+	</div>
+}
+```
+
+> The component renders a textarea element with a ref that receives callback returned from _useResizeObserver__ hook.
+> 
+> Hook is initialized with....
+
+
+## API
+
+```tsx
+useResizeObserver <T extends Element>(cb: ResizeObserverCallback, opts?: ResizeObserverOptions):RefCallback<T> 
+```
+
+> ### Params
+>
+> - __cb__: _ResizeObserverCallback_
+> - __opts?__: _ResizeObserverOptions_
+>
+
+> ### Returns
+>
+> __cb for ref component attribute to observe.__
+> - _RefCallback<T>_  
+>

packages/react-tools/README.md

@@ -49,6 +49,9 @@
 	- [x] useClickOutside
 	- [x] useNetwork
 	- [x] useOnline
+	- [x] useResizeObserver
+	- [ ] useIntersectionObserver
+	- [ ] useMutationObserver
 	- [ ] useSize (=useMeasuree?)
 	- [ ] useScrollIntoView
 	- [ ] useMouse
@@ -57,9 +60,8 @@
 	- [ ] useOrientation
 	- [ ] useImageOnLoad
 	- [ ] usePinchZoom
-	- [ ] useIntersectionObserver
 	- [ ] useInViewport (with area ratio of element: check if is equal to useIntersectionObserver)
-	- [ ] useMutationObserver
+	- [ ] useIsVisibile (??? check if differ from useInViewport)
 	- [ ] useInfiniteScroll
 	- [ ] useDragAndDrop (check for mobile usage)
 

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

@@ -47,4 +47,5 @@ export { useHover } from './useHover';
 export { useResponsive } from './useResponsive';
 export { useClickOutside } from './useClickOutside';
 export { useNetwork } from './useNetwork';
-export { useIsOnline } from './useIsOnline';
+export { useIsOnline } from './useIsOnline';
+export { useResizeObserver } from './useResizeObserver';

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

@@ -0,0 +1,45 @@
+import { RefCallback, useCallback, useRef } from "react"
+
+/**
+ * **`useResizeObserver`**: Hook to use ResizeObserver. Refer to [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+ * @param {ResizeObserverCallback} cb - The function called whenever an observed resize occurs. The function is called with two parameters: __entries__ and __observer__.
+ * @param {ResizeObserverOptions} [opts] - An options object allowing you to set options for the observation.
+ * @returns {[RefCallback<T>, ()=>void, ()=>void]} result - array with: cb for ref component attribute to observe, function to _disconnect_ observer, function to _reconnect_ observer.
+ */
+export const useResizeObserver = <T extends Element>(cb: ResizeObserverCallback, opts?: ResizeObserverOptions):[RefCallback<T>, () => void, () => void] => {
+	const observer = useRef<ResizeObserver>();
+	const working = useRef(true);
+	const nodeRef = useRef<T>();
+
+	return [
+		useCallback((node: T) => {
+			nodeRef.current = node;
+			if (!working.current) {
+				return;
+			}
+			if (!node) {
+				if (observer.current) {
+					observer.current.disconnect();
+					observer.current = undefined;
+					nodeRef.current = undefined;
+					working.current = true;
+				}
+			} else {
+				observer.current = new ResizeObserver(cb);
+				observer.current.observe(node, opts);
+			}
+		}, [cb, opts]),
+		useCallback(() => {
+			if (working.current) {
+				working.current = false;
+				!!observer.current && !!nodeRef.current && observer.current.unobserve(nodeRef.current);
+			}
+		}, []),
+		useCallback(() => {
+			if (!working.current) {
+				working.current = true;
+				!!observer.current && !!nodeRef.current && observer.current?.observe(nodeRef.current!, opts)
+			}
+		}, [opts])
+	]
+}

packages/react-tools/src/index.ts

@@ -61,7 +61,8 @@ export {
 	useResponsive,
 	useClickOutside,
 	useNetwork,
-	useIsOnline
+	useIsOnline,
+	useResizeObserver
 } from './hooks'
 
 export {