T.T

__test__/index.test.tsx

@@ -65,6 +65,11 @@ describe('Testing useDimensions',() => {
         expect(result.current.dimensions).toMatchObject(expected);
     });
     it('should resize when listener is invoked', () => {
+        jest.spyOn(React,'useRef').mockReturnValue({
+            current: {
+                clientWidth: 500
+            }
+        });
         const { observer, listeners, mockObserve } = createMockObserver();
         const { result } = renderHook(() => useDimensions<HTMLDivElement>({
             width: 500,

build/index.d.ts

@@ -1,3 +1,4 @@
+import { MutableRefObject } from 'react';
 import { ResizeObserver } from '@juggle/resize-observer';
 /**
  * can provide initial width and height
@@ -20,7 +21,7 @@ export interface ResizedDimensions extends CalculatedDimensions {
     isResized: boolean;
 }
 export declare type ReturnTypeUseDimensions<E extends HTMLElement> = {
-    ref: (element: E | null) => void;
+    ref: MutableRefObject<E | null>;
     dimensions: ResizedDimensions;
 };
 declare const useDimensions: <E extends HTMLElement>(initialDimensions: InitialDimensions, resizeObserver?: typeof ResizeObserver) => ReturnTypeUseDimensions<E>;

build/index.js

@@ -48,12 +48,10 @@ var calculateDimensions = function (_a) {
 };
 var useDimensions = function (initialDimensions, resizeObserver) {
     if (resizeObserver === void 0) { resizeObserver = resize_observer_1.ResizeObserver; }
-    var _a = react_1.useState(null), element = _a[0], setElement = _a[1];
-    var ref = react_1.useCallback(function (element) {
-        setElement(element);
-    }, []);
-    var _b = react_1.useState(__assign(__assign({}, calculateDimensions(initialDimensions)), { isResized: false })), dimensions = _b[0], setDimensions = _b[1];
+    var ref = react_1.useRef(null);
+    var _a = react_1.useState(__assign(__assign({}, calculateDimensions(initialDimensions)), { isResized: false })), dimensions = _a[0], setDimensions = _a[1];
     react_1.useEffect(function () {
+        var element = ref.current;
         // if DOM is rendered 
         if (element) {
             // resize observer
@@ -77,7 +75,7 @@ var useDimensions = function (initialDimensions, resizeObserver) {
             observer_1.observe(element);
             return function () { return observer_1.unobserve(element); };
         }
-    }, [element]);
+    }, [ref]);
     /* return values
      * @ref: Callback Ref
      * @dimensions: ResizedDimensions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-react-dimensions",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React hooks for resizing svg's viewbox and calculating its size-relevant properties",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/index.ts

@@ -1,7 +1,8 @@
 import {
 	useEffect,
+	useRef,
 	useState,
-	useCallback,
+	MutableRefObject
 } from 'react';
 
 import {
@@ -83,7 +84,7 @@ const calculateDimensions = ({
 }
 
 export type ReturnTypeUseDimensions<E extends HTMLElement> = {
-	ref: (element: E |null) => void,
+	ref: MutableRefObject<E|null>,
 	dimensions: ResizedDimensions,
 };
 
@@ -92,15 +93,13 @@ const useDimensions = <E extends HTMLElement>(
 	resizeObserver = ResizeObserver
 	): ReturnTypeUseDimensions<E> => {
 
-	const [element, setElement ] = useState<E|null>(null);
-	const ref = useCallback((element: E | null) => {
-		setElement(element);
-	},[]);
+	const ref = useRef<E | null>(null);
 	const [dimensions, setDimensions] = useState<ResizedDimensions>({
 		...calculateDimensions(initialDimensions),
 		isResized: false
 	});
 	useEffect(() => {
+		const element = ref.current;
 		// if DOM is rendered 
 		if (element) {
 			// resize observer
@@ -134,7 +133,7 @@ const useDimensions = <E extends HTMLElement>(
 			observer.observe(element);
 			return () => observer.unobserve(element);
 		}
-	},[element]);
+	},[ref]);
 	/* return values
 	 * @ref: Callback Ref  
 	 * @dimensions: ResizedDimensions