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

Comparing version 0.1.5 to 0.1.7

dist/hooks/__tests__/useResizeObserver.test.jsx

@@ -59,3 +59,5 @@ "use strict";
 it("returns the entry from the observer callback", () => {
-    let observerCallback = () => { };
+    let observerCallback = entries => {
+        return entries;
+    };
     class ResizeObserver {
@@ -76,8 +78,46 @@ constructor(callback) {
     (0, react_1.act)(() => {
-        observerCallback([{ test: "test" }], new ResizeObserver(observerCallback));
+        observerCallback([
+            {
+                contentBoxSize: [
+                    {
+                        blockSize: 0,
+                        inlineSize: 0
+                    }
+                ],
+                contentRect: {
+                    bottom: 0,
+                    height: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    width: 0,
+                    x: 0,
+                    y: 0
+                },
+                target: <div />
+            }
+        ], new ResizeObserver(observerCallback));
     });
-    expect(result.current.entry).toEqual({ test: "test", target: expect.any(HTMLDivElement) });
+    expect(result.current.entry).toEqual({
+        contentBoxSize: {
+            blockSize: 0,
+            inlineSize: 0
+        },
+        contentRect: {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0
+        },
+        target: expect.any(HTMLDivElement)
+    });
 });
 it("calls onResize callback if there are entries", () => {
-    let observerCallback = () => { };
+    let observerCallback = entries => {
+        return entries;
+    };
     class ResizeObserver {
@@ -99,6 +139,42 @@ constructor(callback) {
     (0, react_1.act)(() => {
-        observerCallback([{ test: "test" }], new ResizeObserver(observerCallback));
+        observerCallback([
+            {
+                contentBoxSize: [
+                    {
+                        blockSize: 0,
+                        inlineSize: 0
+                    }
+                ],
+                contentRect: {
+                    bottom: 0,
+                    height: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    width: 0,
+                    x: 0,
+                    y: 0
+                },
+                target: <div />
+            }
+        ], new ResizeObserver(observerCallback));
     });
     expect(mockOnResize).toHaveBeenCalledTimes(1);
-    expect(mockOnResize).toHaveBeenCalledWith({ target: expect.any(HTMLDivElement), test: "test" });
+    expect(mockOnResize).toHaveBeenCalledWith({
+        contentBoxSize: {
+            blockSize: 0,
+            inlineSize: 0
+        },
+        contentRect: {
+            bottom: 0,
+            height: 0,
+            left: 0,
+            right: 0,
+            top: 0,
+            width: 0,
+            x: 0,
+            y: 0
+        },
+        target: expect.any(HTMLDivElement)
+    });
 });
@@ -105,0 +181,0 @@ it("returns a null entry and does not call onResize if no rentries were called back", () => {

dist/hooks/useResizeObserver.d.ts

@@ -1,8 +0,26 @@
-export declare function useResizeObserver<T extends Element>(onResize?: (entry: ResizeObserverEntry & {
+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: ResizeObserverEntry | null;
+    entry: ResizeEntry<T> | null;
     observer: (el: T) => void;
     disconnect: () => void;
 };
+export {};
 //# sourceMappingURL=useResizeObserver.d.ts.map

dist/hooks/useResizeObserver.js

@@ -14,2 +14,5 @@ "use strict";
     });
+    const cb = (0, react_1.useCallback)((entry) => {
+        setEntry(entry);
+    }, []);
     (0, react_1.useEffect)(() => {
@@ -21,7 +24,38 @@ if (el === null)
                 return;
-            const entry = entries[0];
-            const newEntry = Object.assign(Object.assign({}, entry), { target: el });
-            setEntry(newEntry);
+            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
+            });
             if (onResize) {
-                onResize(newEntry);
+                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
+                });
             }
@@ -37,3 +71,3 @@ });
         };
-    }, [el, onResize]);
+    }, [el, onResize, cb]);
     return {
@@ -40,0 +74,0 @@ entry,

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15526

increased by31.21%

Lines of code

354

increased by56.64%

No dependency changes