React useWindowSize Hook
React useWindowSize hook for tracking viewport dimensions. Live updates on resize, optional debounce, SSR safe. TypeScript ready.
React useWindowSize Hook preview
Track browser viewport dimensions with useWindowSize. Returns width and height that update live as the user resizes the window. Optional debounce delay prevents excessive re-renders during resize drag. Uses innerWidth and innerHeight for actual viewport size excluding scrollbars. Returns undefined during SSR and optionally until client hydration to prevent mismatch. TypeScript overloads provide correct types based on initialization option. Perfect for responsive layouts, conditional rendering by viewport, resize-aware components, or any UI that adapts to window size. Works with Next.js App Router.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this hook for you — no copy-paste, no CLI:
use shadcnio to install the use-window-size hook into my projectRelated Components
React useMediaQuery Hook
CSS breakpoint detection
React useScreen Hook
Full screen object access
React useResizeObserver Hook
Track element size changes
React useDebounceValue Hook
Debounce any value
React useIsClient Hook
Check if running on client
React useEventListener Hook
Declarative DOM events
FAQ
Was this page helpful?
Sign in to leave feedback.