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

Window width: {windowWidth}

Window height: {windowHeight}

React Js get window height& width on window resize; In this tutorial, you will learn how to detect the dynamic window width and height on window resize using react useState and useEffect hooks.

You can get the width and height of the browser window in React using the window.innerWidth and window.innerHeight properties.

How to Get/Detect Window Size(Height & Width) in React Js

Here is steps to get or detect window size in react js app:

• Step 1 – Create React App
• Step 2 – Create Simple Component
• Step 3 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Create Simple Component

Visit the src directory of your react js app and create get dynamic height and width component named UserWindow.js. And add the following code into it:

import React, { Component } from "react";

class UserWindow extends Component {
  render() {
    return (
      <> </>
    );
  }
}

export default UserWindow;

Then implement code to detect window height width on window resize; as shown below:

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


export default function UserWindow() {

  const [screenSize, getDimension] = useState({
    dynamicWidth: window.innerWidth,
    dynamicHeight: window.innerHeight
  });

  const setDimension = () => {
    getDimension({
      dynamicWidth: window.innerWidth,
      dynamicHeight: window.innerHeight
    })
  }
  
  useEffect(() => {
    window.addEventListener('resize', setDimension);
    
    return(() => {
        window.removeEventListener('resize', setDimension);
    })
  }, [screenSize])

  return (
    <div>
      <ul>
        <li>Width: <strong>{screenSize.dynamicWidth}</strong></li>
        <li>Height: <strong>{screenSize.dynamicHeight}</strong></li>
      </ul>    
    </div>
  )
}

This is a React component that renders a user window with the dynamic width and height of the browser window.

Here’s a breakdown of what’s happening:

1. import React, { useState, useEffect } from 'react': This imports the React library as well as the useState and useEffect hooks.
2. export default function UserWindow() {...}: This defines a function component called UserWindow and exports it as the default export.
3. const [screenSize, getDimension] = useState({...}): This initializes a state variable called screenSize using the useState hook. The initial state is an object that contains the dynamic width and height of the browser window.
4. const setDimension = () => {...}: This defines a function called setDimension that updates the state with the current dimensions of the browser window.
5. useEffect(() => {...}, [screenSize]): This sets up an effect that listens for the resize event on the window object and updates the state with the current dimensions of the browser window. The effect is triggered whenever the screenSize state variable changes.
6. The component returns a <div> element that contains an unordered list (<ul>) with two list items (<li>), one for the dynamic width and the other for the dynamic height. The current dimensions of the browser window are displayed within the <strong> element of each list item using the screenSize state variable.

So overall, this component sets up an event listener to track the changes in the size of the browser window and updates the state accordingly using the useState and useEffect hooks. The updated state is then displayed within the component.

Step 3 – Add Component in App.js

In this step, you need to add  UserWindow.js file in src/App.js file:

import React from 'react';
import './App.css';

import UrlComponent from './components/UrlComponent';

function App() {
  return (
    <div className="App">
      <UrlComponent />
    </div>
  );
}

export default App;

Conclusion

React Get Window Height Width; In this tutorial, you have learned how detect or get dynamic window height and width in react js application.

Recommended React JS Tutorials