react-resize-detector - npm Package Compare versions

Comparing version 10.0.0-beta.1 to 10.0.0-beta.2

build/index.esm.js

@@ -1,33 +0,2 @@
-import {useRef,useState,useMemo,useCallback,useEffect}from'react';import debounce from'lodash/debounce';import throttle from'lodash/throttle';/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};var patchResizeCallback = function (resizeCallback, refreshMode, refreshRate, refreshOptions) {
+import {useRef,useState,useMemo,useCallback,useEffect}from'react';import debounce from'lodash/debounce';import throttle from'lodash/throttle';const patchResizeCallback = (resizeCallback, refreshMode, refreshRate, refreshOptions) => {
     switch (refreshMode) {
@@ -41,11 +10,10 @@ case 'debounce':
     }
-};function useResizeDetector(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
-    var skipResize = useRef(skipOnMount);
-    var _g = useState({
+};function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
+    const skipResize = useRef(skipOnMount);
+    const [size, setSize] = useState({
         width: undefined,
         height: undefined
-    }), size = _g[0], setSize = _g[1];
+    });
     // we are going to use this ref to store the last element that was passed to the hook
-    var _h = useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
+    const [refElement, setRefElement] = useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null);
     // if targetRef is passed, we need to update the refElement
@@ -55,3 +23,3 @@ // we have to use setTimeout because ref get assigned after the hook is called
     if (targetRef) {
-        setTimeout(function () {
+        setTimeout(() => {
             if (targetRef.current !== refElement) {
@@ -65,26 +33,24 @@ setRefElement(targetRef.current);
     // we call setState inside to trigger rerender
-    var refProxy = useMemo(function () {
-        return new Proxy(function (node) {
-            if (node !== refElement) {
-                setRefElement(node);
+    const refProxy = useMemo(() => new Proxy(node => {
+        if (node !== refElement) {
+            setRefElement(node);
+        }
+    }, {
+        get(target, prop) {
+            if (prop === 'current') {
+                return refElement;
             }
-        }, {
-            get: function (target, prop) {
-                if (prop === 'current') {
-                    return refElement;
-                }
-                return target[prop];
-            },
-            set: function (target, prop, value) {
-                if (prop === 'current') {
-                    setRefElement(value);
-                }
-                else {
-                    target[prop] = value;
-                }
-                return true;
+            return target[prop];
+        },
+        set(target, prop, value) {
+            if (prop === 'current') {
+                setRefElement(value);
             }
-        });
-    }, [refElement]);
-    var shouldSetSize = useCallback(function (prevSize, nextSize) {
+            else {
+                target[prop] = value;
+            }
+            return true;
+        }
+    }), [refElement]);
+    const shouldSetSize = useCallback((prevSize, nextSize) => {
         if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
@@ -101,3 +67,3 @@ // skip if dimensions haven't changed
     }, [handleWidth, handleHeight]);
-    var resizeCallback = useCallback(function (entries) {
+    const resizeCallback = useCallback((entries) => {
         if (!handleWidth && !handleHeight)
@@ -109,12 +75,12 @@ return;
         }
-        entries.forEach(function (entry) {
-            var _a = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {}, width = _a.width, height = _a.height;
-            setSize(function (prevSize) {
-                if (!shouldSetSize(prevSize, { width: width, height: height }))
+        entries.forEach(entry => {
+            const { width, height } = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {};
+            setSize(prevSize => {
+                if (!shouldSetSize(prevSize, { width, height }))
                     return prevSize;
-                return { width: width, height: height };
+                return { width, height };
             });
         });
     }, [handleWidth, handleHeight, skipResize, shouldSetSize]);
-    var resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+    const resizeHandler = useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
         resizeCallback,
@@ -126,4 +92,4 @@ refreshMode,
     // on refElement change
-    useEffect(function () {
-        var resizeObserver;
+    useEffect(() => {
+        let resizeObserver;
         if (refElement) {
@@ -138,3 +104,3 @@ resizeObserver = new window.ResizeObserver(resizeHandler);
         }
-        return function () {
+        return () => {
             var _a, _b, _c;
@@ -145,6 +111,6 @@ (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
     }, [resizeHandler, refElement]);
-    useEffect(function () {
+    useEffect(() => {
         onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
     }, [size]);
-    return __assign({ ref: refProxy }, size);
+    return Object.assign({ ref: refProxy }, size);
 }export{useResizeDetector};//# sourceMappingURL=index.esm.js.map

build/index.js

@@ -1,33 +0,2 @@
-'use strict';var react=require('react'),debounce=require('lodash/debounce'),throttle=require('lodash/throttle');/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
-
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};var patchResizeCallback = function (resizeCallback, refreshMode, refreshRate, refreshOptions) {
+'use strict';var react=require('react'),debounce=require('lodash/debounce'),throttle=require('lodash/throttle');const patchResizeCallback = (resizeCallback, refreshMode, refreshRate, refreshOptions) => {
     switch (refreshMode) {
@@ -41,11 +10,10 @@ case 'debounce':
     }
-};function useResizeDetector(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.skipOnMount, skipOnMount = _c === void 0 ? false : _c, refreshMode = _b.refreshMode, _d = _b.refreshRate, refreshRate = _d === void 0 ? 1000 : _d, refreshOptions = _b.refreshOptions, _e = _b.handleWidth, handleWidth = _e === void 0 ? true : _e, _f = _b.handleHeight, handleHeight = _f === void 0 ? true : _f, targetRef = _b.targetRef, observerOptions = _b.observerOptions, onResize = _b.onResize;
-    var skipResize = react.useRef(skipOnMount);
-    var _g = react.useState({
+};function useResizeDetector({ skipOnMount = false, refreshMode, refreshRate = 1000, refreshOptions, handleWidth = true, handleHeight = true, targetRef, observerOptions, onResize } = {}) {
+    const skipResize = react.useRef(skipOnMount);
+    const [size, setSize] = react.useState({
         width: undefined,
         height: undefined
-    }), size = _g[0], setSize = _g[1];
+    });
     // we are going to use this ref to store the last element that was passed to the hook
-    var _h = react.useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null), refElement = _h[0], setRefElement = _h[1];
+    const [refElement, setRefElement] = react.useState((targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) || null);
     // if targetRef is passed, we need to update the refElement
@@ -55,3 +23,3 @@ // we have to use setTimeout because ref get assigned after the hook is called
     if (targetRef) {
-        setTimeout(function () {
+        setTimeout(() => {
             if (targetRef.current !== refElement) {
@@ -65,26 +33,24 @@ setRefElement(targetRef.current);
     // we call setState inside to trigger rerender
-    var refProxy = react.useMemo(function () {
-        return new Proxy(function (node) {
-            if (node !== refElement) {
-                setRefElement(node);
+    const refProxy = react.useMemo(() => new Proxy(node => {
+        if (node !== refElement) {
+            setRefElement(node);
+        }
+    }, {
+        get(target, prop) {
+            if (prop === 'current') {
+                return refElement;
             }
-        }, {
-            get: function (target, prop) {
-                if (prop === 'current') {
-                    return refElement;
-                }
-                return target[prop];
-            },
-            set: function (target, prop, value) {
-                if (prop === 'current') {
-                    setRefElement(value);
-                }
-                else {
-                    target[prop] = value;
-                }
-                return true;
+            return target[prop];
+        },
+        set(target, prop, value) {
+            if (prop === 'current') {
+                setRefElement(value);
             }
-        });
-    }, [refElement]);
-    var shouldSetSize = react.useCallback(function (prevSize, nextSize) {
+            else {
+                target[prop] = value;
+            }
+            return true;
+        }
+    }), [refElement]);
+    const shouldSetSize = react.useCallback((prevSize, nextSize) => {
         if (prevSize.width === nextSize.width && prevSize.height === nextSize.height) {
@@ -101,3 +67,3 @@ // skip if dimensions haven't changed
     }, [handleWidth, handleHeight]);
-    var resizeCallback = react.useCallback(function (entries) {
+    const resizeCallback = react.useCallback((entries) => {
         if (!handleWidth && !handleHeight)
@@ -109,12 +75,12 @@ return;
         }
-        entries.forEach(function (entry) {
-            var _a = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {}, width = _a.width, height = _a.height;
-            setSize(function (prevSize) {
-                if (!shouldSetSize(prevSize, { width: width, height: height }))
+        entries.forEach(entry => {
+            const { width, height } = (entry === null || entry === void 0 ? void 0 : entry.contentRect) || {};
+            setSize(prevSize => {
+                if (!shouldSetSize(prevSize, { width, height }))
                     return prevSize;
-                return { width: width, height: height };
+                return { width, height };
             });
         });
     }, [handleWidth, handleHeight, skipResize, shouldSetSize]);
-    var resizeHandler = react.useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
+    const resizeHandler = react.useCallback(patchResizeCallback(resizeCallback, refreshMode, refreshRate, refreshOptions), [
         resizeCallback,
@@ -126,4 +92,4 @@ refreshMode,
     // on refElement change
-    react.useEffect(function () {
-        var resizeObserver;
+    react.useEffect(() => {
+        let resizeObserver;
         if (refElement) {
@@ -138,3 +104,3 @@ resizeObserver = new window.ResizeObserver(resizeHandler);
         }
-        return function () {
+        return () => {
             var _a, _b, _c;
@@ -145,6 +111,6 @@ (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
     }, [resizeHandler, refElement]);
-    react.useEffect(function () {
+    react.useEffect(() => {
         onResize === null || onResize === void 0 ? void 0 : onResize(size.width, size.height);
     }, [size]);
-    return __assign({ ref: refProxy }, size);
+    return Object.assign({ ref: refProxy }, size);
 }exports.useResizeDetector=useResizeDetector;//# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-resize-detector",
-  "version": "10.0.0-beta.1",
+  "version": "10.0.0-beta.2",
   "description": "React resize detector",
@@ -31,8 +31,8 @@ "main": "build/index.js",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash": "^4.14.202",
-    "@types/react": "^18.2.46",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "eslint": "^8.56.0",
@@ -43,3 +43,3 @@ "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.1.1",
-    "rollup": "^4.9.2",
+    "rollup": "^4.9.5",
     "rollup-plugin-node-externals": "^6.1.2",
@@ -50,4 +50,4 @@ "tslib": "^2.6.2",
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
@@ -54,0 +54,0 @@ "author": "Vitalii Maslianok <[e-mail]> (https://github.com/maslianok)",

README.md

@@ -9,3 +9,3 @@ # Handle element resizes like it's 2024!
 
-🐥 Tiny <a href="https://bundlephobia.com/result?p=react-resize-detector" target="__blank">~3kb</a>
+🐥 Tiny <a href="https://bundlephobia.com/result?p=react-resize-detector" target="__blank">~2kb</a>
 
@@ -12,0 +12,0 @@ 🐼 Written in TypeScript

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

Worsened metrics

Total package byte prevSize

41380

decreased by-52.18%

Lines of code

325

decreased by-15.58%

No dependency changes