How to get the Width & Height of the Viewport in React

Updated: March 3, 2023 By: A Goodman One comment

This concise and straightforward article shows you how to get the width and height of the viewport (window) in React. Without any further ado, let’s unveil things that matter.


In React and any other frontend technologies that use Javascript, you can use the window object without importing any things. This object provides 2 properties that can help us read the width and height of the viewport:

  • window.innerWidth
  • window.innerHeight

However, the size of the window is not consistent. The complete example below demonstrates how to update the width and height we receive each time the browser window is resized by the user.

Full Example


The idea of this demo project is really simple. We just get the width and height of the viewport and then display them on the screen.

The Code

Here’s the full source code in the App.js file with explanations:

// src/App.js

import { useState, useEffect } from 'react';

function App() {
  // the size of the window in the begginning
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,

  // we use the useEffect hook to listen to the window resize event
  useEffect(() => {
    window.onresize = () => {
        width: window.innerWidth,
        height: window.innerHeight,
  }, []);

  return (
        padding: 30,
      <h1> example</h1>
      {/* Display the results */}
      <h3 style={{ color: 'blue' }}>Window Width: {windowSize.width}px</h3>
      <h3 style={{ color: 'red' }}>Window Height: {windowSize.height}px</h3>

export default App;


You’ve learned how to obtain information about the size of the window. This knowledge is very helpful, especially when you develop a responsive and adaptive web app. If you’d like to explore more new and exciting stuff about modern React, take a look at the following articles:

You can also check our React category page and React Native category page for the latest tutorials and examples.

Notify of
1 Comment
Inline Feedbacks
View all comments
9 months ago

quick and to the point. I like it.

Related Articles