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.
React useResizeObserver Hook preview
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.
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-resize-observer hook into my projectRelated 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.