useWindowResize
A custom hook for managing window resize events in React.
useWindowResize is a custom React hook that provides an easy way to track window dimensions in your functional components. It automatically updates when the browser window is resized, making it perfect for building responsive interfaces or implementing size-dependent features.
The hook includes built-in debouncing using shaddy's built-in custom useDebouncedCallback hook to prevent excessive re-renders during resize events, and leverages the useEventListener hook for efficient and type-safe event handling. It also handles server-side rendering gracefully by checking if the window object is available.
Width
0px
×
Height
0px
Resize your browser window to see changes
Viewport Size: Small (Mobile)
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/use-window-resize
API
▸ useWindowResize(): WindowSize
Returns
- Returns an object with the following properties:
| Property | Type | Description |
|---|---|---|
width | number | undefined | Current window width in pixels. undefined during server-side rendering. |
height | number | undefined | Current window height in pixels. undefined during server-side rendering. |
