1const Component = () => {
2  const { height, width } = useWindowDimensions();
3
4  return (
5    <div>
6      width: {width} ~ height: {height}
7    </div>
8  );
9}
10

1import { useState, useEffect } from 'react';
2
3function getWindowDimensions() {
4  const { innerWidth: width, innerHeight: height } = window;
5  return {
6    width,
7    height
8  };
9}
10
11export default function useWindowDimensions() {
12  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
13
14  useEffect(() => {
15    function handleResize() {
16      setWindowDimensions(getWindowDimensions());
17    }
18
19    window.addEventListener('resize', handleResize);
20    return () => window.removeEventListener('resize', handleResize);
21  }, []);
22
23  return windowDimensions;
24}
25
26