Skip to content

Instantly share code, notes, and snippets.

@ChrisDobby
Created July 28, 2019 13:06
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ChrisDobby/afe21f81a79b7605d79c20fe84b765c8 to your computer and use it in GitHub Desktop.
Save ChrisDobby/afe21f81a79b7605d79c20fe84b765c8 to your computer and use it in GitHub Desktop.
React component to display the width and height of the window
import React from "react";
function WidthAndHeight() {
const [width, setWidth] = React.useState(window.innerWidth);
const [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
window.addEventListener("resize", updateWidthAndHeight);
return () => window.removeEventListener("resize", updateWidthAndHeight);
});
const updateWidthAndHeight = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};
return (
<div>
<div>{`Window width = ${width}`}</div>
<div>{`Window height = ${height}`}</div>
</div>
);
}
export default WidthAndHeight;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment