Nick Scialli (he/him)One of the coolest parts about React Hooks is that you can create your own! In this post, we'll quickly roll our own useWindowSize hook.
What useWindowSize Will Do
Today we're creating the useWindowSize custom hook because we'd like to make sure we always have access to our window innerHeight and innerWidth properties when they change. To do this, we'll tap into the window's onresize event listener.
Writing the Hook
Since we need to maintain the window size information, we'll use useState and default it to a two element array consisting of the initial window .
const { useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
return size;
}
Of course, this won't be dynamic. To be dynamic, we'll want to use the window resize event handler. Now, we only need to set the event listener once, so we'll do this with a useEffect hook with an empty dependency array.
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
}, []);
return size;
}
Awesome, so now we've added an event listener and we setSize whenever our window is resized.
There's one last thing we need to do: add a cleanup function to our useEffect hook to make sure we remove the event listener when our component unmounts.
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
// Clean up!
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return size;
}
See It in Action
Our final code and a codepen are below!
const { useEffect, useState } = React;
function useWindowSize() {
const [size, setSize] = useState([window.innerHeight, window.innerWidth]);
useEffect(() => {
const handleResize = () => {
setSize([window.innerHeight, window.innerWidth]);
}
window.addEventListener("resize", handleResize);
// Clean up!
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
return size;
}
const App = () => {
const [height, width] = useWindowSize();
return(
<div className="box">
<h1>useWindowSize Hook</h1>
<p>
height: {height}<br />
width: {width}
</p>
</div>
);
}
