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;