kitzo

React utilities library

useWindowSize

Track the browser window size with an optional update delay.

Usage

WindowSize.tsx

const { screenWidth, screenHeight } = useWindowSize(updateDelay);

Example

Resize the window

Screen width: 0px

Screen height: 0px

Resize.tsx

import { useWindowSize } from 'kitzo';
            
function ViewportSize() {
  const { screenWidth, screenHeight } = useWindowSize(200);

  return (
    <div>
      <p>Width: {screenWidth}px</p>
      <p>Height: {screenHeight}px</p>
    </div>
  );
}

API

Parameter	Type	Description
`updateDelay`	`number`	Delay in milliseconds to throttle window resize updates

Returns the current window dimensions.

Behavior

Updates on window resize events
Throttles updates using the provided delay
Returns the latest width and height values
Safe to use in responsive layouts