react-dom-resize-observer - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

dist/hooks/useResizeObserver.d.ts

@@ -1,7 +0,7 @@
-/// <reference types="react" />
-export declare function useResizeObserver<T extends Element | null>(ref?: React.MutableRefObject<T>, onResize?: (entry: ResizeObserverEntry) => void): {
+import React from "react";
+export declare function useResizeObserver<T extends Element | null>(elementRef?: React.MutableRefObject<T>, onResize?: (entry: ResizeObserverEntry) => void): {
     entry: ResizeObserverEntry | null;
     observer: (el: T) => void;
-    disconnect?: () => void;
+    disconnect: () => void;
 };
 //# sourceMappingURL=useResizeObserver.d.ts.map

dist/hooks/useResizeObserver.js

@@ -5,15 +5,12 @@ "use strict";
 const react_1 = require("react");
-function useResizeObserver(ref, onResize) {
-    const [state, setState] = (0, react_1.useState)(false);
+function useResizeObserver(elementRef, onResize) {
     const resizeObserver = (0, react_1.useRef)(null);
     const observerEntry = (0, react_1.useRef)(null);
     const disconnect = (0, react_1.useRef)(() => {
-        /** */
+        /** Initialized as a no-op */
     });
     const unobserve = (0, react_1.useRef)(() => {
-        /** */
+        /** Initialized as a no-op */
     });
-    /** Set when */
-    const isElementObserved = (0, react_1.useRef)(false);
-    /** Pass a callback to set the observed element. */
+    /** Callback with the same signature as an elements `ref` attribute. */
     const observer = (0, react_1.useCallback)((el) => {
@@ -31,3 +28,2 @@ if (el === null)
         resizeObserver.current.observe(el);
-        isElementObserved.current = true;
         disconnect.current = () => {
@@ -42,24 +38,14 @@ var _a;
     }, [onResize]);
-    /** Set the element reference as a side-effect if they already have a ref. */
+    /** If they have provided a ref of their own, set it the observer here. */
     (0, react_1.useEffect)(() => {
-        const currentElement = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (currentElement === undefined ||
-            currentElement === null ||
-            isElementObserved.current === true)
+        if ((elementRef === null || elementRef === void 0 ? void 0 : elementRef.current) === undefined || elementRef.current === null)
             return;
-        observer(currentElement);
-    }, []);
-    /** If there is an element reference passed in, set to true to prevent observer callback running twice. */
+        observer(elementRef.current);
+    }, [observer, elementRef]);
+    /** Unobserve and disconnect when unmounted. */
     (0, react_1.useEffect)(() => {
-        const currentElement = ref === null || ref === void 0 ? void 0 : ref.current;
-        if (currentElement === undefined || currentElement === null)
-            return;
-        isElementObserved.current = true;
-    }, []);
-    /** Unobserve and disconnect when unmounted. */
-    (0, react_1.useEffect)(() => () => {
-        if (resizeObserver.current !== null) {
+        return () => {
             unobserve.current();
             disconnect.current();
-        }
+        };
     }, []);
@@ -66,0 +52,0 @@ return {

package.json

 {
   "name": "react-dom-resize-observer",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

14757

decreased by-3.56%

Lines of code

326

decreased by-4.12%

No dependency changes