SSR-Compatible (NextJS, Gatsby etc) React hook for getting Window Size.

useWindowSize.js

import { useState, useEffect } from "react";

function useWindowSize() {
  const [windowSize, setWindowSize] = useState<{ width: number | undefined; height: number | undefined }>({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

export default useWindowSize;

Hi I tried to use this on my project. I imported the function and console logged it. I got on the browser console some words, like Prototype, constructor, but no width nor height. How should I use this to get my width and height? thanks

Hi I tried to use this on my project. I imported the function and console logged it. I got on the browser console some words, like Prototype, constructor, but no width nor height. How should I use this to get my width and height? thanks

This is a React Hook, so you need to import and use it inside a React component to the the windowSize variable.