If you are wondering how to get window Width and Height in React, this article is for you. We have mentioned below possible methods that you can refer to apply. Now let’s take a closer look at each one.

What should we do to get window width and height in React?

Method 1: Use React hooks

The first method that we want to show you is using react hooks.

First, we need to install the React app with the below command; and a new react project will be created by using create-react-app.

npx create-react-app react-blog

Next, the components and directories must be created before constructing the ScreenSize.js file. To create a stateless component in React, we can enter this code:

import React, { Component } from "react";

class UserWindow extends Component {

  render() {

    return (

      <> </>

    );

  }

}

export default UserWindow;

Then to use the react hooks, enter the hooks in parentheses {useState, useEffect}

The width and height are accessed via the window object because the useState hooks set the initial state.

The size detection function in this useEffect hook was added to show the window height width on window resize.

The window size is set in the useEffect hook when the component is updated. The return clean-up function eliminates the unmounting element event.

Code in components/ScreenSize.js file:

import React, { useState, useEffect } from 'react'

export default function ScreenSize() {

  const [windowDimenion, detectHW] = useState({

    winWidth: window.innerWidth,

    winHeight: window.innerHeight,

  })

  const detectSize = () => {

    detectHW({

      winWidth: window.innerWidth,

      winHeight: window.innerHeight,

    })

  }

  useEffect(() => {

    window.addEventListener('resize', detectSize)

    return () => {

      window.removeEventListener('resize', detectSize)

    }

  }, [windowDimenion])

  return (

    <div>

      <p>Width: <strong>{windowDimenion.winWidth}</strong></p>

      <p>Height: <strong>{windowDimenion.winHeight}</strong></p>

    </div>

  )

}

And those last steps are adding the component in the Js application and launching the application. Good luck!

Method 2: Use the .addEventListener() method

To get window Width and Height in React, you can also refer to the .addEventListener() method. 

Syntax:

addEventListener(type, listener);

Parameters:

Type: A case-sensitive string representing the event listening.

Listener: The object that receives a notification when an event of the specified type occurs. An object with a handleEvent() method, or a JavaScript function, must be null. Check out the event listener callback for more information on the callback itself.

This method is used in class components to watch for resizing events on the window object. The event handler will be executed and update the width value of the input window whenever the user modifies the width of the window.

constructor(props) {

    super(props);

    this.state = { windowWidth: 0, windowHeight: 0 };

    this.handleResize = this.handleResize.bind(this);

}

componentDidMount() {

    this.handleResize();

    window.addEventListener('resize', this.handleResize);

}

componentWillUnmount() {

    window.removeEventListener('resize', this.handleResize);

}

handleResize() {

    this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight });

}

The windowHeight and windowWidth attributes must be set to their default values of 0.

With the componentDidMount() method, you can use https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for the first time. As a result, it is possible to set the initial dimensions and a handle for the resize event. Next, we remove the event listener using the componentWillUnmount lifecycle method. And we will use the innerwidth and innerheight properties to get a window’s width and height, respectively. Finally, the setstate method will be quite helpful for establishing state properties for the dimensions and the component’s state.

Conclusion

And those are the methods we recommend for you; we hope they can help you get window Width and Height in React. Don’t forget to leave your thoughts below in the comments. Thank you for taking the time to read the article.

Read more:

→ Define a function calc_pyramid_volume() with parameters base_length, base_width, and pyramid_height…