How to Get the Window's Width and Height in React

# Get window Width and Height in React

To get the window width and height in React:

Use the window.innerWidth property to get the width of the window in pixels.
Use the window.innerHeight property to get the height of the window in pixels.

App.js

Copied!
import {useRef} from 'react';

export default function App() {
  const windowWidth = useRef(window.innerWidth);
  const windowHeight = useRef(window.innerHeight);

  console.log('width: ', windowWidth.current);
  console.log('height: ', windowWidth.current);

  return (
    <div>
      <h2>Width: {windowWidth.current}</h2>

      <h2>Height: {windowHeight.current}</h2>
    </div>
  );
}

react get window width height

The code for this article is available on GitHub

The innerWidth property returns the interior width of the window in pixels. This includes the width of the vertical scroll bar (if one is present).

The innerHeight property returns the interior height of the window in pixels, including the height of the horizontal scroll bar (if present).

If you need to get the height and width of a specific element, click on the following article.

# Get window Width and Height on resize in React

To get the width and height of the window on resize in React:

Use the innerWidth and innerHeight properties on the window object.
Add an event listener for the resize event in the useEffect hook.
Keep changes to the width and height of the window in a state variable.

App.js

Copied!
import {useEffect, useState} from 'react';

export default function App() {
  const [windowSize, setWindowSize] = useState(getWindowSize());

  useEffect(() => {
    function handleWindowResize() {
      setWindowSize(getWindowSize());
    }

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize);
    };
  }, []);

  return (
    <div>
      <h2>Width: {windowSize.innerWidth}</h2>

      <h2>Height: {windowSize.innerHeight}</h2>
    </div>
  );
}

function getWindowSize() {
  const {innerWidth, innerHeight} = window;
  return {innerWidth, innerHeight};
}

react get window width

The code for this article is available on GitHub

We used the useState hook to initialize a state variable called windowSize.

The variable tracks changes to the width and height of the window object.

index.js

Copied!
const [windowSize, setWindowSize] = useState(getWindowSize());

We passed an empty dependencies array to the useEffect hook because we only want to add an event listener for the resize event once - on the initial render.

App.s

Copied!
useEffect(() => {
  function handleWindowResize() {
    setWindowSize(getWindowSize());
  }

  window.addEventListener('resize', handleWindowResize);

  return () => {
    window.removeEventListener('resize', handleWindowResize);
  };
}, []);

The resize event is fired when the window has been resized.

Every time the window is resized, we update the windowSize state variable according to the new innerWidth and innerHeight of the window.

App.js

Copied!
function handleWindowResize() {
  setWindowSize(getWindowSize());
}

function getWindowSize() {
  const {innerWidth, innerHeight} = window;
  return {innerWidth, innerHeight};
}

The function we returned from the useEffect hook will get invoked when the component unmounts.

App.js

Copied!
return () => {
  window.removeEventListener('resize', handleWindowResize);
};

The code for this article is available on GitHub

We used the removeEventListener() method to remove the event listener that we previously registered.

The cleanup step is important because we want to make sure we don't have any memory leaks in our application.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Get the Window's Width and Height in React

# Get window Width and Height in React

# Get window Width and Height on resize in React

# Additional Resources

Borislav Hadzhiev