react-use - npm Package Compare versions

Comparing version 17.5.1 to 17.6.0

esm/useWindowSize.d.ts

@@ -1,2 +0,7 @@
-declare const useWindowSize: (initialWidth?: number, initialHeight?: number) => {
+interface Options {
+    initialWidth?: number;
+    initialHeight?: number;
+    onChange?: (width: number, height: number) => void;
+}
+declare const useWindowSize: ({ initialWidth, initialHeight, onChange, }?: Options) => {
     width: number;
@@ -3,0 +8,0 @@ height: number;

esm/useWindowSize.js

 import { useEffect } from 'react';
 import useRafState from './useRafState';
 import { isBrowser, off, on } from './misc/util';
-var useWindowSize = function (initialWidth, initialHeight) {
-    if (initialWidth === void 0) { initialWidth = Infinity; }
-    if (initialHeight === void 0) { initialHeight = Infinity; }
-    var _a = useRafState({
+var useWindowSize = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.initialWidth, initialWidth = _c === void 0 ? Infinity : _c, _d = _b.initialHeight, initialHeight = _d === void 0 ? Infinity : _d, onChange = _b.onChange;
+    // Use the useRafState hook to maintain the current window size (width and height)
+    var _e = useRafState({
         width: isBrowser ? window.innerWidth : initialWidth,
         height: isBrowser ? window.innerHeight : initialHeight,
-    }), state = _a[0], setState = _a[1];
+    }), state = _e[0], setState = _e[1];
     useEffect(function () {
+        // Only run the effect on the browser (to avoid issues with SSR)
         if (isBrowser) {
             var handler_1 = function () {
+                var width = window.innerWidth;
+                var height = window.innerHeight;
+                // Update the state with the new window size
                 setState({
-                    width: window.innerWidth,
-                    height: window.innerHeight,
+                    width: width,
+                    height: height,
                 });
+                // If an onChange callback is provided, call it with the new dimensions
+                if (onChange)
+                    onChange(width, height);
             };
+            // Add event listener for the resize event
             on(window, 'resize', handler_1);
+            // Cleanup function to remove the event listener when the component is unmounted (it's for performance optimization)
             return function () {
@@ -25,4 +34,5 @@ off(window, 'resize', handler_1);
     }, []);
+    // Return the current window size (width and height)
     return state;
 };
 export default useWindowSize;

lib/useWindowSize.d.ts

@@ -1,2 +0,7 @@
-declare const useWindowSize: (initialWidth?: number, initialHeight?: number) => {
+interface Options {
+    initialWidth?: number;
+    initialHeight?: number;
+    onChange?: (width: number, height: number) => void;
+}
+declare const useWindowSize: ({ initialWidth, initialHeight, onChange, }?: Options) => {
     width: number;
@@ -3,0 +8,0 @@ height: number;

lib/useWindowSize.js

@@ -7,18 +7,27 @@ "use strict";
 var util_1 = require("./misc/util");
-var useWindowSize = function (initialWidth, initialHeight) {
-    if (initialWidth === void 0) { initialWidth = Infinity; }
-    if (initialHeight === void 0) { initialHeight = Infinity; }
-    var _a = useRafState_1.default({
+var useWindowSize = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.initialWidth, initialWidth = _c === void 0 ? Infinity : _c, _d = _b.initialHeight, initialHeight = _d === void 0 ? Infinity : _d, onChange = _b.onChange;
+    // Use the useRafState hook to maintain the current window size (width and height)
+    var _e = useRafState_1.default({
         width: util_1.isBrowser ? window.innerWidth : initialWidth,
         height: util_1.isBrowser ? window.innerHeight : initialHeight,
-    }), state = _a[0], setState = _a[1];
+    }), state = _e[0], setState = _e[1];
     react_1.useEffect(function () {
+        // Only run the effect on the browser (to avoid issues with SSR)
         if (util_1.isBrowser) {
             var handler_1 = function () {
+                var width = window.innerWidth;
+                var height = window.innerHeight;
+                // Update the state with the new window size
                 setState({
-                    width: window.innerWidth,
-                    height: window.innerHeight,
+                    width: width,
+                    height: height,
                 });
+                // If an onChange callback is provided, call it with the new dimensions
+                if (onChange)
+                    onChange(width, height);
             };
+            // Add event listener for the resize event
             util_1.on(window, 'resize', handler_1);
+            // Cleanup function to remove the event listener when the component is unmounted (it's for performance optimization)
             return function () {
@@ -29,4 +38,5 @@ util_1.off(window, 'resize', handler_1);
     }, []);
+    // Return the current window size (width and height)
     return state;
 };
 exports.default = useWindowSize;

package.json

 {
   "name": "react-use",
-  "version": "17.5.1",
+  "version": "17.6.0",
   "description": "Collection of React Hooks",
@@ -70,13 +70,13 @@ "main": "lib/index.js",
   "devDependencies": {
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.24.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@semantic-release/changelog": "5.0.1",
-    "@semantic-release/git": "9.0.1",
-    "@semantic-release/npm": "7.1.3",
+    "@babel/preset-env": "7.24.8",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
+    "@semantic-release/changelog": "6.0.3",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/npm": "12.0.1",
     "@shopify/jest-dom-mocks": "2.11.7",
     "@storybook/addon-actions": "6.4.9",
-    "@storybook/addon-knobs": "6.2.9",
+    "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-notes": "5.3.21",
@@ -89,4 +89,4 @@ "@storybook/addon-options": "5.3.21",
     "@types/react": "17.0.0",
-    "@typescript-eslint/eslint-plugin": "5.6.0",
-    "@typescript-eslint/parser": "5.6.0",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "babel-core": "6.26.3",
@@ -96,16 +96,16 @@ "babel-eslint": "10.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
-    "eslint": "8.28.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "8.10.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "7.35.0",
     "eslint-plugin-react-hooks": "4.6.0",
-    "fork-ts-checker-webpack-plugin": "6.5.2",
-    "gh-pages": "3.2.3",
+    "fork-ts-checker-webpack-plugin": "6.5.3",
+    "gh-pages": "5.0.0",
     "husky": "7.0.4",
     "jest": "26.6.3",
-    "jest-localstorage-mock": "2.4.22",
+    "jest-localstorage-mock": "2.4.26",
     "keyboardjs": "2.7.0",
@@ -118,4 +118,4 @@ "lint-staged": "12.5.0",
     "react-dom": "17.0.2",
-    "react-frame-component": "5.2.3",
-    "react-spring": "9.5.5",
+    "react-frame-component": "5.2.7",
+    "react-spring": "9.7.4",
     "react-test-renderer": "17.0.2",
@@ -126,7 +126,7 @@ "rebound": "0.1.0",
     "rimraf": "3.0.2",
-    "rxjs": "7.5.7",
-    "semantic-release": "17.4.7",
+    "rxjs": "7.8.1",
+    "semantic-release": "24.0.0",
     "ts-jest": "26.5.6",
     "ts-loader": "8.4.0",
-    "ts-node": "10.9.1",
+    "ts-node": "10.9.2",
     "typescript": "4.1.5"
@@ -165,4 +165,4 @@ },
   "volta": {
-    "node": "14.21.1",
-    "yarn": "1.22.19"
+    "node": "14.21.3",
+    "yarn": "1.22.22"
   },
@@ -169,0 +169,0 @@ "collective": {

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

Lines of code

10357

increased by0.29%

Worsened metrics

Total package byte prevSize

453839

decreased by-15.78%

Number of package files

511

decreased by-0.2%

No dependency changes