Shadcn.io is not affiliated with official shadcn/ui
React useWindowSize Hook
React useWindowSize hook for tracking viewport dimensions. Live updates on resize, optional debounce, SSR safe. TypeScript ready.
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.
React useWindowSize Hook preview
Installation
Related 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.