useWindowSize()

React hook to obtain the current window size in React apps.

useWindowSize() automatically updates width and height values when screen size changes. You can get your application window's width and height like this:

const { width, height } = useWindowSize();

Installation

npm install use-window-size-v2

or

yarn add use-window-size-v2

Usage

This hook returns the current width and height of the window. It is debounced, meaning it will wait delay milliseconds (0ms by default) for the resize events to stop firing before it actually updates its state with the new width and height.

Parameter (optional)

Key	Type	Default	Description
delay	number	0	The amount of time in milliseconds you want to wait after the latest resize event before updating the size of the window in state.

Return object

	Type	Description
width	number	The current width of the window
height	number	The current height of the window

Example

import useWindowSize from "use-window-size-v2";

const App = () => {
  const { width, height } = useWindowSize(100); // wait 100ms for the resize events

  return (
    <div>
      <p>Window Width: {width}px</p>
      <p>Window Height: {height}px</p>
    </div>
  );
};

export default App;