useOuterWindowSize

The useOuterWindowSize hook is helpful when you want retrieve and track the dimensions of the outer current window. It is useful for layout adjusments and conditional rendering of any component based on outer window size.

It uses the window.outerWidth and window.outerHeight properties and also setup a subscription to the resize event to get latest values at all times. When using SSR, it will result in null values for width and height.

useOuterWindowSize

Width	Height
0 px	0 px

Resize your wndow screen to see changes in outer window dimenions.

Usage

Import the hook from @abhushanaj/react-hooks and use in required component.

./src/App.tsx

import { useOuterWindowSize } from '@abhushanaj/react-hooks';

function App() {
  const { width, height } = useOuterWindowSize();

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

export default App;

Properties

1. When Server Side Rendering (SSR) is performed, the initial values for width and height will be null, and the actual dimensions will be reflected once it reaches the browser.

2. The API uses the window.outerHeight and window.outerWidth properties to get window dimension. Learn more about them from MDN.

API Reference

Return Value

Parameter	Type	Description	Default
width	number|null	The width of the outer window.	N/A
height	number|null	The height of the outer window.	N/A