From 34103b1069d48f6c5b8dfc129771f20eee3b8829 Mon Sep 17 00:00:00 2001 From: Matt Crowder Date: Sat, 28 Sep 2019 20:37:52 -0400 Subject: [PATCH] added useWindowSize --- package.json | 8 ++--- src/__tests__/useWindowSize.test.js | 48 +++++++++++++++++++++++++++++ src/index.js | 1 + src/useWindowSize.js | 29 +++++++++++++++++ yarn.lock | 27 ++++++++-------- 5 files changed, 95 insertions(+), 18 deletions(-) create mode 100644 src/__tests__/useWindowSize.test.js create mode 100644 src/useWindowSize.js diff --git a/package.json b/package.json index 7181101..db121c1 100644 --- a/package.json +++ b/package.json @@ -54,8 +54,8 @@ "peerDependencies": { "@material-ui/core": "3.9.2", "jest-localstorage-mock": "2.4.0", - "react": "16.8.4", - "react-dom": "16.8.4" + "react": "16.10.1", + "react-dom": "16.10.1" }, "devDependencies": { "@babel/cli": "7.2.3", @@ -73,8 +73,8 @@ "jest": "24.4.0", "jest-dom": "3.0.1", "jest-localstorage-mock": "2.4.0", - "react": "16.8.4", - "react-dom": "16.8.4", + "react": "^16.10.1", + "react-dom": "^16.10.1", "react-styleguidist": "9.0.4", "react-testing-library": "6.0.0", "webpack": "4.29.6" diff --git a/src/__tests__/useWindowSize.test.js b/src/__tests__/useWindowSize.test.js new file mode 100644 index 0000000..eea0aad --- /dev/null +++ b/src/__tests__/useWindowSize.test.js @@ -0,0 +1,48 @@ +import React from "react"; + +import { render } from "react-testing-library"; +import useWindowSize from "../useWindowSize"; +function Comp() { + const { innerHeight, innerWidth, outerHeight, outerWidth } = useWindowSize(); + return ( +
+
+ innerHeight: + {innerHeight} +
+
+ innerWidth: + {innerWidth} +
+
+ outerHeight: + {outerHeight} +
+
+ outerWidth: + {outerWidth} +
+
+ ); +} + +test("that it renders online", () => { + const { getByText } = render(); + + expect(getByText(/innerHeight:*768/)).toBeInTheDocument(); + expect(getByText(/innerWidth:*1024/)).toBeInTheDocument(); + expect(getByText(/outerHeight:*768/)).toBeInTheDocument(); + expect(getByText(/outerWidth:*1024/)).toBeInTheDocument(); + + global.innerHeight = 501; + global.innerWidth = 500; + global.outerHeight = 502; + global.outerWidth = 503; + // Trigger the window resize event. + global.window.dispatchEvent(new Event("resize")); + + expect(getByText(/innerHeight:*501/)).toBeInTheDocument(); + expect(getByText(/innerWidth:*500/)).toBeInTheDocument(); + expect(getByText(/outerHeight:*502/)).toBeInTheDocument(); + expect(getByText(/outerWidth:*503/)).toBeInTheDocument(); +}); diff --git a/src/index.js b/src/index.js index e57b9ed..7e6b385 100644 --- a/src/index.js +++ b/src/index.js @@ -15,3 +15,4 @@ export { default as useLocalStorageSetState } from "./useLocalStorageSetState"; export { default as DefaultValues } from "./DefaultValues"; export { default as useNetworkStatus } from "./useNetworkStatus"; export { default as useObjectState } from "./useObjectState"; +export { default as useWindowSize } from "./useWindowSize"; diff --git a/src/useWindowSize.js b/src/useWindowSize.js new file mode 100644 index 0000000..4dd80f8 --- /dev/null +++ b/src/useWindowSize.js @@ -0,0 +1,29 @@ +import React from "react"; + +function getSize() { + return { + innerHeight: window.innerHeight, + innerWidth: window.innerWidth, + outerHeight: window.outerHeight, + outerWidth: window.outerWidth, + }; +} + +function useWindowSize() { + const [windowSize, setWindowSize] = React.useState(getSize()); + + function handleResize() { + setWindowSize(getSize()); + } + + React.useEffect(() => { + window.addEventListener("resize", handleResize); + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + return windowSize; +} + +export default useWindowSize; diff --git a/yarn.lock b/yarn.lock index 850a8d9..5e30409 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6942,15 +6942,15 @@ react-docgen@3.0.0-rc.2: node-dir "^0.1.10" recast "^0.16.0" -react-dom@16.8.4: - version "16.8.4" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.4.tgz#1061a8e01a2b3b0c8160037441c3bf00a0e3bc48" - integrity sha512-Ob2wK7XG2tUDt7ps7LtLzGYYB6DXMCLj0G5fO6WeEICtT4/HdpOi7W/xLzZnR6RCG1tYza60nMdqtxzA8FaPJQ== +react-dom@^16.10.1: + version "16.10.1" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.1.tgz#479a6511ba34a429273c213cbc2a9ac4d296dac1" + integrity sha512-SmM4ZW0uug0rn95U8uqr52I7UdNf6wdGLeXDmNLfg3y5q5H9eAbdjF5ubQc3bjDyRrvdAB2IKG7X0GzSpnn5Mg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.4" + scheduler "^0.16.1" react-error-overlay@^5.1.0: version "5.1.4" @@ -7090,15 +7090,14 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react@16.8.4: - version "16.8.4" - resolved "https://registry.yarnpkg.com/react/-/react-16.8.4.tgz#fdf7bd9ae53f03a9c4cd1a371432c206be1c4768" - integrity sha512-0GQ6gFXfUH7aZcjGVymlPOASTuSjlQL4ZtVC5YKH+3JL6bBLCVO21DknzmaPlI90LN253ojj02nsapy+j7wIjg== +react@^16.10.1: + version "16.10.1" + resolved "https://registry.yarnpkg.com/react/-/react-16.10.1.tgz#967c1e71a2767dfa699e6ba702a00483e3b0573f" + integrity sha512-2bisHwMhxQ3XQz4LiJJwG3360pY965pTl/MRrZYxIBKVj4fOHoDs5aZAkYXGxDRO1Li+SyjTAilQEbOmtQJHzA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.13.4" read-pkg-up@^2.0.0: version "2.0.0" @@ -7587,10 +7586,10 @@ saxes@^3.1.5: dependencies: xmlchars "^1.3.1" -scheduler@^0.13.4: - version "0.13.6" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.13.6.tgz#466a4ec332467b31a91b9bf74e5347072e4cd889" - integrity sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ== +scheduler@^0.16.1: + version "0.16.1" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.1.tgz#a6fb6ddec12dc2119176e6eb54ecfe69a9eba8df" + integrity sha512-MIuie7SgsqMYOdCXVFZa8SKoNorJZUWHW8dPgto7uEHn1lX3fg2Gu0TzgK8USj76uxV7vB5eRMnZs/cdEHg+cg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"