react-use - npm Package Compare versions

Comparing version 17.3.1 to 17.3.2

esm/useMedia.d.ts

@@ -1,2 +0,2 @@
-declare const useMedia: (query: string, defaultState?: boolean) => boolean;
+declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
 export default useMedia;

esm/useMedia.js

 import { useEffect, useState } from 'react';
 import { isBrowser } from './misc/util';
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
 var useMedia = function (query, defaultState) {
-    if (defaultState === void 0) { defaultState = false; }
-    var _a = useState(isBrowser ? function () { return window.matchMedia(query).matches; } : defaultState), state = _a[0], setState = _a[1];
+    var _a = useState(getInitialState(query, defaultState)), state = _a[0], setState = _a[1];
     useEffect(function () {
@@ -7,0 +20,0 @@ var mounted = true;

esm/useSessionStorage.js

@@ -22,3 +22,3 @@ import { useEffect, useState } from 'react';
             // sessionStorage can throw. JSON.parse and JSON.stringify
-            // cat throw, too.
+            // can throw, too.
             return initialValue;
@@ -25,0 +25,0 @@ }

lib/useMedia.d.ts

@@ -1,2 +0,2 @@
-declare const useMedia: (query: string, defaultState?: boolean) => boolean;
+declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean;
 export default useMedia;

lib/useMedia.js

@@ -5,5 +5,18 @@ "use strict";
 var util_1 = require("./misc/util");
+var getInitialState = function (query, defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (util_1.isBrowser) {
+        return window.matchMedia(query).matches;
+    }
+    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
+    if (process.env.NODE_ENV !== 'production') {
+        console.warn('`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return false;
+};
 var useMedia = function (query, defaultState) {
-    if (defaultState === void 0) { defaultState = false; }
-    var _a = react_1.useState(util_1.isBrowser ? function () { return window.matchMedia(query).matches; } : defaultState), state = _a[0], setState = _a[1];
+    var _a = react_1.useState(getInitialState(query, defaultState)), state = _a[0], setState = _a[1];
     react_1.useEffect(function () {
@@ -10,0 +23,0 @@ var mounted = true;

lib/useSessionStorage.js

@@ -24,3 +24,3 @@ "use strict";
             // sessionStorage can throw. JSON.parse and JSON.stringify
-            // cat throw, too.
+            // can throw, too.
             return initialValue;
@@ -27,0 +27,0 @@ }

package.json

 {
   "name": "react-use",
-  "version": "17.3.1",
+  "version": "17.3.2",
   "description": "Collection of React Hooks",
@@ -70,42 +70,42 @@ "main": "lib/index.js",
   "devDependencies": {
-    "@babel/core": "7.14.2",
+    "@babel/core": "7.16.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.14.2",
-    "@babel/preset-react": "7.13.13",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/preset-env": "7.16.4",
+    "@babel/preset-react": "7.16.0",
+    "@babel/preset-typescript": "7.16.0",
     "@semantic-release/changelog": "5.0.1",
-    "@semantic-release/git": "9.0.0",
-    "@semantic-release/npm": "7.1.1",
+    "@semantic-release/git": "9.0.1",
+    "@semantic-release/npm": "7.1.3",
     "@shopify/jest-dom-mocks": "2.11.7",
-    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-actions": "6.4.9",
     "@storybook/addon-knobs": "6.2.9",
     "@storybook/addon-notes": "5.3.21",
     "@storybook/addon-options": "5.3.21",
-    "@storybook/react": "6.2.9",
-    "@testing-library/react": "11.2.6",
-    "@testing-library/react-hooks": "5.1.2",
-    "@types/jest": "26.0.23",
+    "@storybook/react": "6.4.9",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "7.0.2",
+    "@types/jest": "27.0.3",
     "@types/react": "17.0.0",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "5.6.0",
+    "@typescript-eslint/parser": "5.6.0",
     "babel-core": "6.26.3",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.2.3",
     "babel-plugin-dynamic-import-node": "2.3.3",
-    "eslint": "7.26.0",
+    "eslint": "8.4.1",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "6.0.0",
-    "eslint-plugin-flowtype": "5.7.2",
-    "eslint-plugin-import": "2.23.0",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-react": "7.23.2",
-    "eslint-plugin-react-hooks": "4.2.0",
-    "fork-ts-checker-webpack-plugin": "6.2.8",
-    "gh-pages": "3.1.0",
-    "husky": "6.0.0",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react-hooks": "4.3.0",
+    "fork-ts-checker-webpack-plugin": "6.5.0",
+    "gh-pages": "3.2.3",
+    "husky": "7.0.4",
     "jest": "26.6.3",
-    "jest-localstorage-mock": "2.4.12",
+    "jest-localstorage-mock": "2.4.18",
     "keyboardjs": "2.6.4",
-    "lint-staged": "10.5.4",
+    "lint-staged": "12.1.2",
     "markdown-loader": "6.0.0",
@@ -116,14 +116,14 @@ "prettier": "2.3.0",
     "react-dom": "17.0.2",
-    "react-frame-component": "5.0.0",
-    "react-spring": "9.1.2",
+    "react-frame-component": "5.2.1",
+    "react-spring": "9.3.2",
     "react-test-renderer": "17.0.2",
     "rebound": "0.1.0",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.1",
     "rimraf": "3.0.2",
-    "rxjs": "7.0.0",
-    "semantic-release": "17.4.2",
+    "rxjs": "7.4.0",
+    "semantic-release": "17.4.7",
     "ts-jest": "26.5.6",
-    "ts-loader": "8.2.0",
-    "ts-node": "9.1.1",
+    "ts-loader": "9.2.6",
+    "ts-node": "10.4.0",
     "typescript": "4.1.5"
@@ -162,4 +162,4 @@ },
   "volta": {
-    "node": "14.17.0",
-    "yarn": "1.22.10"
+    "node": "14.18.2",
+    "yarn": "1.22.17"
   },
@@ -166,0 +166,0 @@ "collective": {

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

525991

0.29%

Lines of code

10099

0.26%

Worsened metrics

Number of low supply chain risk alerts

30

7.14%

No dependency changes