[IMPL] useMeasure hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useMeasure/UseMeasure.tsx

@@ -0,0 +1,14 @@
+import { useMeasure } from "../../../../../../packages/react-tools/src"
+
+/**
+The component tracks div element dimensions and display them on screen. Try to resize div to see its current dimensions.
+ */
+export const UseMeasure = () => {
+	const [cbRef, state] = useMeasure<HTMLDivElement>();
+
+	return <div style={{margin: '0 auto'}}>
+		<p>Dimensions: {JSON.stringify(state)}</p>
+		<br />
+		<div ref={cbRef} style={{margin:'0 auto', width: 100, height: 100, overflow: 'auto', resize: 'both', border: '1px solid lightblue'}}/>
+	</div>
+}

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

@@ -55,7 +55,8 @@ export const COMPONENTS = [
 			"useIsOnline",
 			"useResizeObserver",
 			"useIntersectionObserver",
-			"useMutationObserver"
+			"useMutationObserver",
+			"useMeasure"
 		],
 		//API DOM
 		[

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

@@ -0,0 +1,40 @@
+# useMeasure
+Hook to  measure and track element's dimensions.
+
+## Usage
+
+```tsx
+export const UseMeasure = () => {
+	const [cbRef, state] = useMeasure<HTMLDivElement>();
+
+	return <div>
+		<p>Dimensions: {state.toString()}</p>
+		<br />
+		<div ref={cbRef} style={{width: 100, height: 100, resize: 'both', border: '1px solid lightblue'}}>
+
+		</div>
+	</div>
+}
+```
+
+> The component tracks div element dimensions and display them on screen. Try to resize div to see its current dimensions.
+
+
+## API
+
+```tsx
+useMeasure <T extends Element>(): [React.RefCallback<T>, DOMRectReadOnly] 
+```
+
+> ### Params
+>
+>
+>
+
+> ### Returns
+>
+> __result__: a refCallback for target element and a object with target element size.
+> - __Array__:  
+>     - _React.RefCallback<T>_  
+>     - _DOMRectReadOnly_  
+>

packages/react-tools/README.md

@@ -37,7 +37,7 @@
 	- [x] useMemoizedFunction
 	- [x] useMemoCompare
 	- [x] useMemoDeepCompare
-	- [ ] useRaf
+	- [x] useRaf
 	- [ ] useMergedRef
 	- [ ] useObjectRef
 	- [ ] useArrayRef
@@ -58,7 +58,7 @@
 	- [x] useResizeObserver
 	- [x] useIntersectionObserver
 	- [x] useMutationObserver
-	- [ ] useSize (=useMeasuree?)
+	- [x] useMeasure
 	- [ ] useScrollIntoView
 	- [ ] useMouse
 	- [ ] useLongPress

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

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

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

@@ -0,0 +1,24 @@
+import { useCallback, useState } from "react";
+import { useResizeObserver } from "."
+
+/**
+ * **`useMeasure`**: Hook to  measure and track element's dimensions.
+ * @returns {[React.RefCallback<T>, DOMRectReadOnly]} result - a refCallback for target element and a object with target element size.
+ */
+export const useMeasure = <T extends Element>(): [React.RefCallback<T>, DOMRectReadOnly] => {
+	const [state, setState] = useState<DOMRectReadOnly>(()=>new DOMRect());
+	const [cbRef] = useResizeObserver<T>(useCallback((entries) => {
+		setState(state => {
+			const dim = entries[0].target.getBoundingClientRect();
+			if (dim.top !== state.top || dim.left !== state.left || dim.right !== state?.right || dim.bottom !== state.bottom) {
+				return dim;
+			}
+			return state;
+		});
+	}, []));
+
+	return [
+		cbRef,
+		state
+	]
+}

packages/react-tools/src/index.ts

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