Shadcn.io is not affiliated with official shadcn/ui
React useResizeObserver Hook
React useResizeObserver hook for tracking element size changes. Width/height with box model options. TypeScript ready.
Track element dimensions reactively with useResizeObserver. Pass a ref and get width/height that update whenever the element resizes. Uses the native ResizeObserver API for efficient size tracking. Supports content-box, border-box, and device-pixel-content-box measurements. Optional onResize callback for custom handling without state updates. Compares previous size to avoid unnecessary re-renders on unchanged dimensions. Perfect for responsive components, resize handles, dynamic layouts, chart containers, or any element that needs to react to its own size. SSR safe with window checks.
React useResizeObserver Hook preview
Installation
Related Components
React useWindowSize Hook
Track window dimensions
React useIntersectionObserver Hook
Track element visibility
React useMediaQuery Hook
Respond to CSS breakpoints
React useElementSize Hook
Simple element dimensions
React useMousePosition Hook
Track cursor position
React useScreen Hook
Full screen object access
FAQ
Was this page helpful?
Sign in to leave feedback.