keii.dev
fork
Configure Feed
Select the types of activity you want to include in your feed.
A self hosted solution for privately rating and reviewing different sorts of media
fork
Configure Feed
Select the types of activity you want to include in your feed.
1import { useState, useEffect } from "react";
2
3function useWindowSize() {
4 // Initialize state with undefined width/height so server and client renders match
5 // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
6 const [windowSize, setWindowSize] = useState({
7 width: undefined,
8 height: undefined,
9 });
10
11 useEffect(() => {
12 // only execute all the code below in client side
13 // Handler to call on window resize
14 function handleResize() {
15 // Set window width/height to state
16 setWindowSize({
17 width: window.innerWidth,
18 height: window.innerHeight,
19 });
20 }
21
22 // Add event listener
23 window.addEventListener("resize", handleResize);
24
25 // Call handler right away so state gets updated with initial window size
26 handleResize();
27
28 // Remove event listener on cleanup
29 return () => window.removeEventListener("resize", handleResize);
30 }, []); // Empty array ensures that effect is only run on mount
31 return windowSize;
32}
33
34export default useWindowSize;