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

Comparing version 0.1.7 to 0.1.9

dist/hooks/__tests__/useResizeObserver.test.jsx

@@ -24,6 +24,8 @@ "use strict";
 window.ResizeObserver = ResizeObserver;
-const MockComponent = () => {
-    const result = (0, useResizeObserver_1.useResizeObserver)();
+const MockComponent = (props) => {
+    const result = (0, useResizeObserver_1.useResizeObserver)(props.elementRef);
     return (<div>
-      <div ref={result.observer}>Mock</div>
+      <div ref={props.elementRef === undefined ? result.observer : undefined}>
+        Mock
+      </div>
       <button onClick={result.disconnect}>Disconnect</button>
@@ -38,6 +40,11 @@ </div>);
 });
-it("observes the registered DOM element", () => {
+it("observes the DOM element passed into the observer callback.", () => {
     (0, react_1.render)(<MockComponent />);
     expect(mockObserve).toHaveBeenCalledTimes(1);
 });
+it("observes the DOM element reference passed as a parameter.", () => {
+    const elRef = { current: document.createElement("div") };
+    (0, react_1.render)(<MockComponent elementRef={elRef}/>);
+    expect(mockObserve).toHaveBeenCalledTimes(1);
+});
 it("disconnects when callback invoked", () => {
@@ -73,3 +80,3 @@ const { getByText, rerender } = (0, react_1.render)(<MockComponent />);
     window.ResizeObserver = ResizeObserver;
-    const { result } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)());
+    const { result, rerender } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)());
     (0, react_1.act)(() => {
@@ -102,7 +109,10 @@ const el = document.createElement("div");
     });
+    rerender();
     expect(result.current.entry).toEqual({
-        contentBoxSize: {
-            blockSize: 0,
-            inlineSize: 0
-        },
+        contentBoxSize: [
+            {
+                blockSize: 0,
+                inlineSize: 0
+            }
+        ],
         contentRect: {
@@ -118,3 +128,3 @@ bottom: 0,
         },
-        target: expect.any(HTMLDivElement)
+        target: <div />
     });
@@ -136,3 +146,3 @@ });
     const mockOnResize = jest.fn();
-    const { result } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)(mockOnResize));
+    const { result } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)(undefined, mockOnResize));
     (0, react_1.act)(() => {
@@ -167,6 +177,8 @@ const el = document.createElement("div");
     expect(mockOnResize).toHaveBeenCalledWith({
-        contentBoxSize: {
-            blockSize: 0,
-            inlineSize: 0
-        },
+        contentBoxSize: [
+            {
+                blockSize: 0,
+                inlineSize: 0
+            }
+        ],
         contentRect: {
@@ -182,3 +194,3 @@ bottom: 0,
         },
-        target: expect.any(HTMLDivElement)
+        target: <div />
     });
@@ -198,3 +210,3 @@ });
     const mockOnResize = jest.fn();
-    const { result } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)(mockOnResize));
+    const { result } = (0, react_1.renderHook)(() => (0, useResizeObserver_1.useResizeObserver)(undefined, mockOnResize));
     (0, react_1.act)(() => {
@@ -201,0 +213,0 @@ const el = document.createElement("div");

dist/hooks/useResizeObserver.d.ts

@@ -1,26 +0,7 @@
-declare type ResizeEntry<T> = {
-    contentBoxSize: {
-        inlineSize: number;
-        blockSize: number;
-    };
-    contentRect: {
-        bottom: number;
-        height: number;
-        left: number;
-        right: number;
-        top: number;
-        width: number;
-        x: number;
-        y: number;
-    };
-    target: T;
-};
-export declare function useResizeObserver<T extends Element>(onResize?: (entry: ResizeEntry<T> & {
-    target: T;
-}) => void): {
-    entry: ResizeEntry<T> | null;
+/// <reference types="react" />
+export declare function useResizeObserver<T extends Element | null>(ref?: React.MutableRefObject<T>, onResize?: (entry: ResizeObserverEntry) => void): {
+    entry: ResizeObserverEntry | null;
     observer: (el: T) => void;
-    disconnect: () => void;
+    disconnect?: () => void;
 };
-export {};
 //# sourceMappingURL=useResizeObserver.d.ts.map

dist/hooks/useResizeObserver.js

@@ -5,69 +5,62 @@ "use strict";
 const react_1 = require("react");
-function useResizeObserver(onResize) {
-    const [entry, setEntry] = (0, react_1.useState)(null);
-    const [el, setEl] = (0, react_1.useState)(null);
-    const observer = (0, react_1.useCallback)((el) => {
-        setEl(el);
-    }, []);
+function useResizeObserver(ref, onResize) {
+    const [state, setState] = (0, react_1.useState)(false);
+    const resizeObserver = (0, react_1.useRef)(null);
+    const observerEntry = (0, react_1.useRef)(null);
     const disconnect = (0, react_1.useRef)(() => {
         /** */
     });
-    const cb = (0, react_1.useCallback)((entry) => {
-        setEntry(entry);
-    }, []);
-    (0, react_1.useEffect)(() => {
+    const unobserve = (0, react_1.useRef)(() => {
+        /** */
+    });
+    /** Set when */
+    const isElementObserved = (0, react_1.useRef)(false);
+    /** Pass a callback to set the observed element. */
+    const observer = (0, react_1.useCallback)((el) => {
         if (el === null)
             return;
-        const resizeObserver = new ResizeObserver(entries => {
+        resizeObserver.current = new ResizeObserver(entries => {
             if (entries.length === 0)
                 return;
-            const { contentBoxSize: [contentBoxSize], contentRect } = entries[0];
-            cb({
-                contentBoxSize: {
-                    inlineSize: contentBoxSize.inlineSize,
-                    blockSize: contentBoxSize.blockSize
-                },
-                contentRect: {
-                    bottom: contentRect.bottom,
-                    height: contentRect.height,
-                    left: contentRect.left,
-                    right: contentRect.right,
-                    top: contentRect.top,
-                    width: contentRect.width,
-                    x: contentRect.x,
-                    y: contentRect.y
-                },
-                target: el
-            });
+            observerEntry.current = entries[0];
             if (onResize) {
-                onResize({
-                    contentBoxSize: {
-                        inlineSize: contentBoxSize.inlineSize,
-                        blockSize: contentBoxSize.blockSize
-                    },
-                    contentRect: {
-                        bottom: contentRect.bottom,
-                        height: contentRect.height,
-                        left: contentRect.left,
-                        right: contentRect.right,
-                        top: contentRect.top,
-                        width: contentRect.width,
-                        x: contentRect.x,
-                        y: contentRect.y
-                    },
-                    target: el
-                });
+                onResize(entries[0]);
             }
         });
-        resizeObserver.observe(el);
+        resizeObserver.current.observe(el);
+        isElementObserved.current = true;
         disconnect.current = () => {
-            resizeObserver.disconnect();
+            var _a;
+            (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.disconnect();
         };
-        return () => {
-            resizeObserver.unobserve(el);
-            resizeObserver.disconnect();
+        unobserve.current = () => {
+            var _a;
+            (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.unobserve(el);
         };
-    }, [el, onResize, cb]);
+    }, [onResize]);
+    /** Set the element reference as a side-effect if they already have a ref. */
+    (0, react_1.useEffect)(() => {
+        const currentElement = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (currentElement === undefined ||
+            currentElement === null ||
+            isElementObserved.current === true)
+            return;
+        observer(currentElement);
+    }, []);
+    /** If there is an element reference passed in, set to true to prevent observer callback running twice. */
+    (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) {
+            unobserve.current();
+            disconnect.current();
+        }
+    }, []);
     return {
-        entry,
+        entry: observerEntry.current,
         observer,
@@ -74,0 +67,0 @@ disconnect: disconnect.current

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

15301

decreased by-1.45%

Lines of code

340

decreased by-3.95%

No dependency changes