react-use
Advanced tools
Comparing version 17.3.1 to 17.3.2
@@ -1,2 +0,2 @@ | ||
declare const useMedia: (query: string, defaultState?: boolean) => boolean; | ||
declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean; | ||
export default useMedia; |
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; |
@@ -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 @@ } |
@@ -1,2 +0,2 @@ | ||
declare const useMedia: (query: string, defaultState?: boolean) => boolean; | ||
declare const useMedia: (query: string, defaultState?: boolean | undefined) => boolean; | ||
export default useMedia; |
@@ -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; |
@@ -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 @@ } |
{ | ||
"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": { |
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
525991
10099
30