React Js Detect Window Width and Height Tutorial

Being a React developer, sometimes you might need to get the screen dimensions. If you are not familiar with the process of getting the screen size, then no worries.

In this quick guide, we will help you learn how to use React hooks to get the screen width and height on window or screen resize in React application.

To find out the screen height and width, we will the functional component. In the stateless component, we will show you how to use useState and useEffect hooks eloquently.

How to Get Window Width and Height On Window Resize in React Js

  • Step 1: Install React App
  • Step 2: Set Up Component
  • Step 3: Use React Hooks to Get Screen Size
  • Step 4: Add Component in App Js
  • Step 5: Run Application

Install React App

Let us create the new React project using the create-react-app tool, run the provided command to install React app.

npx create-react-app react-blog

Set Up Component

Subsequently, create the components/ directory, then create the ScreenSize.js file.

Here is the code that help you create the stateless component in React.

import React, { Component } from "react";

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

export default UserWindow;

Use React Hooks to Get Screen Size

Hooks are available through react package. Import hooks in parenthesis {useState, useEffect}.

The useState hooks set up the initial state; therefore, we access the height and width through the window object.

To show the window height width on window resize requires a function. We have added the detect size function in the useEffect hook.

The useEffect hook alone takes care of three tasks. Usually, we have the componentDidMount, componentDidUpdate, and componentWillUnmount lifeCycle methods in the class component.

In the useEffect hook, we set the window size when the component is updated. The return clean-up function removes the event when the component unmounts.

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

Add Component in App Js

To register the component in React, you have to import the ScreenSize.js component at the top, also call the component inside the App function.

Update the src/App.js file.

import React from 'react'
import ScreenSize from './components/ScreenSize'

export default function App() {
  return (
    <div>
      <ScreenSize />
    </div>
  )
}

Run Application

Lastly, you may check the feature, but make sure to start the application.

Here is the command that help you run the app.

npm start

React Js Detect Window Width and Height Tutorial

Summary

Hooks are functions that allow you to manage state and best fit with the functional component paradigm. Hooks work similarly to lifecycle methods of class components.

In this guide, we have figured out how to get the height and width of the screen in React application.