How To Get Window Width And Height In React

You will be introduced to how to get window width and height in React. Along with a few examples to make it easier for you to understand.

Get Window Width And Height In React

To get the width and height of the window, React provides us with two properties of the window object: innerWidth and innerHeight.

Syntax:

window.innerWidth  //get Width
window.innerHeight  //get Height

Parameters:

• innerWidth: returns a number corresponding to the width of the window’s content display area in pixels.
• innerHeight: returns a number corresponding to the height of the window’s content display area in pixels.

Take a look at this example:

export default function App() {
    return (
      <div className = 'container'>
        <div>Height: {window.innerHeight}</div>
        <div>Width: {window.innerWidth}</div>
      </div>
  );
}

Output:

The area highlighted in red is the size of the window object: 226×289. This example is just a specific case. You will need to reload the page to get the final size when you resize the window.

Let me show you how to get real-time window height and width values due to changes ​​through the below example.

import {useState,useEffect} from 'react';
import './App.css'

export default function App() {
    function WindowDimensions() {
       const {innerWidth, innerHeight} = window;
       return {innerWidth, innerHeight};
    }
    
    const [size, setSize] = useState(WindowDimensions());
  
    useEffect(() => {
      function handleResizing() {
        setSize(WindowDimensions());
      }
  
      window.addEventListener('resize', handleResizing);
  
      return () => {
        window.removeEventListener('resize', handleResizing);
      };
    }, []);
    
    return (
      <div className = 'container'>
        <h1>Your Window's Dimensions</h1>
        <h2>Height x Width: {size.innerHeight} x {size.innerWidth}</h2>
      </div>
    );
}

Output:

We still use the innerHeight and innerWidth properties to get the value of the window’s size. However, you will use an additional state variable named ‘size‘ and the corresponding ‘setSize()‘ function to archive and manage the size of the window object.

In the useEffect hook, pass in a function that handles the resizing of the screen. Attach an event that listens to the change of the screen size. Every time you resize the browser, the handleResizing() function will be called, and the window size will be updated to the new value in real-time, like what you can see in the output of the above example.

Moreover, I have added the removeEventListener method to remove previously attached listener events. Deleting old event listeners helps our application reduce the possibility of memory overflows.

Summary

That’s all I want to mention. I hope you understand how we can get window width and height in React through the above simple example. Thank you for reading to the end.

Maybe you are interested:

• Remove the underline of a Link in React
• Programmatically update query params in React router
• Clear an Input field’s value in React.js

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js