React Tutorial- How To Get Dynamic Window Height Width Using React Hooks Example

React Js Get Window Height Width On Window Resize Tutorial

In this tutorial, we will be finding out how to use React useState and useEffect Hooks to detect the dynamic window width and height on window resize.

 

React Hooks are quite significant and amazing since this help use state and other essential features in React Functional Components. Now, let us understand what useState and useEffect Hooks are.

useEffect: This hook orders React to take action after the component renders. It takes an array as a value; the value passed to the useEffect array will tell the useEffect hook to invoke only the change that occurred in the passed array property. Otherwise, if e leave it empty, it will look for the change in the entire component.

 

On the other hand, useEffect offers a cleanup function. It works asynchronously and runs the cleanup function before performing a new effect. It unsubscribed the functions, values, boosts the component performance by preventing the memory lane.

 

useState: This hook helps you define the state variable in functional components. We set the initial state to this function, and it returns the variable with the current state.

 

How To Use React Hooks To Detect Window Size In React JS

Step 1- Create New React Project

Step 2- Create Component File

Step 3-Get Dynamic Screen Dimension On Resize

Step 4- Update App Js File

Step 5- Start React App

 

Let’s learn in detail now:

Step 1- Create New React Project

The first step is just to create a new React project using create-react-app CLI tool. Hope that you have already installed the node and npm package in your system:

npx create-react-app react-blog

 

After we have created the app, we will get into the app:

cd react-blog

 

Step 2- Create Component File

Here, we will be creating a UserWindow.js file where we need to paste the below code:

import React, { Component } from "react";
class UserWindow extends Component {
  render() {
    return (
      <> </>
    );
  }
}
export default UserWindow;

 

Step 3- Get Dynamic Screen Dimension On Resize

In this step, we require to import React and useState, useEffect hooks from the ‘React’ package into the functional component. To set the initial state, we have to use the useState hook.

The useEffect hook is here to call the setDimension function when the component renders. In our case, it will re-render when the user resizes the screen size.

In this step, we have to open the components/UserWindow.js file in which we need to paste the following code:

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>
  )
}

 

Step 4- Update App Js File

Afterward, we will add the UserWindow component in the app js file. Then, we will open the src/App.js file and insert the following code into it:

import React from "react";
import UserWindow from "./components/UserWindow"

export default function App() {
  return (
    <UserWindow />
  );
}

 

Step 5- Start React App

Since we have reached the last step of this tutorial, we will execute the below command in order to start the app:

npm start

 

Conclusion

In this tutorial, we have seen how to take the action when the component renders or re-renders. For this, we have used the concept of React Hooks to find out the dynamic window height and width.

We have used the useState to set the initial height and width of the window. In addition, we used the useEffect hook to update the value when found the change in the screen size variable.

 

Thanks