React useResizeObserver Hook

Ever tried to track element size changes in React and ended up with window.resize event chaos, getBoundingClientRect polling nightmares, or broken responsive components? You know the drill—manually listening to window resize events that don't catch container changes, polling element dimensions with performance issues, dealing with layout thrashing from constant DOM measurements. This free open source React useResizeObserver custom hook handles all that element size tracking complexity so you can focus on building responsive features instead of debugging measurement edge cases in your React applications.

useResizeObserver showcase

Real-time element size tracking with ResizeObserver API:

"use client";import * as React from "react";import { toast } from "sonner";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useResizeObserver } from "@/components/ui/shadcn-io/use-resize-observer";export default function UseResizeObserverDemo() {  const ref = React.useRef<HTMLDivElement>(null);  const { width = 0, height = 0 } = useResizeObserver({    ref: ref as React.RefObject<HTMLElement>,    box: 'border-box',  });  return (    <div className="p-6 max-w-sm mx-auto space-y-4">      {/* Header */}      <div className="text-center space-y-1">        <h3 className="text-lg font-semibold">Resize Observer Demo</h3>        <p className="text-sm text-muted-foreground">Real-time element size tracking</p>      </div>            {/* Current Size */}      <div className="space-y-2">        <Label className="text-sm font-medium">Current Size</Label>        <div className="bg-muted rounded p-2 min-h-[40px] flex items-center justify-center">          <Badge variant="default" className="text-sm px-3 py-1 font-mono">            {Math.round(width)} × {Math.round(height)}px          </Badge>        </div>      </div>      {/* Resizable Element */}      <div className="space-y-2">        <Label className="text-sm font-medium">Resizable Element</Label>        <div           ref={ref}           className="bg-primary/20 border-2 border-primary rounded-lg p-3 resize overflow-auto min-h-[60px] max-w-full max-h-[120px] flex items-center justify-center"        >          <span className="text-sm font-medium">Drag corner to resize</span>        </div>      </div>      {/* Instructions */}      <div className="text-center min-h-[16px] flex items-center justify-center">        <div className="text-xs text-muted-foreground">          Drag the resize handle to see live updates        </div>      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const badgeVariants = cva(  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",  {    variants: {      variant: {        default:          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",        secondary:          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",        destructive:          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",      },    },    defaultVariants: {      variant: "default",    },  })function Badge({  className,  variant,  asChild = false,  ...props}: React.ComponentProps<"span"> &  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {  const Comp = asChild ? Slot : "span"  return (    <Comp      data-slot="badge"      className={cn(badgeVariants({ variant }), className)}      {...props}    />  )}export { Badge, badgeVariants }

This free open source React hook simplifies element resize detection with TypeScript support for modern JavaScript applications. Whether you're building responsive charts, adaptive layouts, or dynamic modals in your Next.js projects, this React hook keeps your size tracking accurate and performant.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-resize-observer.json

npx shadcn@latest add https://www.shadcn.io/registry/use-resize-observer.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-resize-observer.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-resize-observer.json

Why most resize detection implementations suck

Look, you could keep using window.resize listeners and manual getBoundingClientRect calls. But then you hit the resize detection complexity—window events don't catch container size changes, DOM measurement queries cause layout thrashing, performance issues from constant polling in React applications.

Most developers use window.resize events that only fire when the browser window changes, missing crucial element-level resizing from content updates or CSS animations in TypeScript components. Or they poll element dimensions with getBoundingClientRect(), causing performance bottlenecks and layout thrashing from constant DOM queries. Some create custom solutions without proper cleanup, leading to memory leaks when components unmount in Next.js projects.

This React hook uses the native ResizeObserver API under the hood, which is specifically designed for efficient element size monitoring in JavaScript applications. The browser handles all the optimization, plus you get precise element-level detection instead of just window changes.

Plus it handles all the edge cases—SSR compatibility with proper fallbacks, multiple box model support, automatic cleanup and memory leak prevention in React development. No more scattered resize listeners or performance bottlenecks from DOM polling.

This free open source React hook manages element size state while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript components, reliable resize detection keeps your JavaScript development responsive.

Features

• ResizeObserver API providing native browser performance for element size observation in React applications
• Multiple box models supporting content-box, border-box, and device-pixel-content-box measurements in TypeScript components
• Performance optimized with debounced callbacks and memory leak prevention in Next.js projects
• TypeScript generics with type-safe element references and size objects for JavaScript development
• SSR compatibility with proper server-side rendering support and hydration safety in React frameworks
• Browser fallbacks handling legacy browser support and polyfill requirements in modern applications
• Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for basic responsive design in React applications. CSS media queries handle most layout cases perfectly. But when you need element-specific size detection for dynamic content or JavaScript-driven layouts, this React hook delivers in Next.js projects.

Perfect for:

• Responsive charts - Resize data visualizations when container dimensions change built with TypeScript
• Adaptive grids - Adjust column counts and layouts based on available space using React patterns
• Modal positioning - Reposition dialogs and popovers when content size changes in JavaScript applications
• Canvas scaling - Maintain aspect ratios and pixel density for graphics rendering in React components
• Dynamic typography - Adjust font sizes based on container width constraints in Next.js applications
• Masonry layouts - Recalculate item positions when container or item sizes change using TypeScript safety

API Reference

useResizeObserver

useResizeObserver<T extends HTMLElement = HTMLElement>(
  options: UseResizeObserverOptions<T>
): UseResizeObserverReturn

UseResizeObserverOptions

Box Model Types

Return Value

Common gotchas

ResizeObserver needs polyfill for old browsers: Most modern browsers support ResizeObserver natively, but older browsers need a polyfill in React applications. The React hook gracefully handles missing ResizeObserver by returning undefined dimensions.

Box model choice affects measurements: Choose 'content-box' for inner content sizing, 'border-box' for total element size including padding/borders, or 'device-pixel-content-box' for high-DPI graphics work in TypeScript components.

Cleanup is automatic but refs matter: The React hook automatically disconnects observers when components unmount or refs change in Next.js projects. Make sure your ref is stable to avoid unnecessary observer recreation.

SSR returns undefined initially: Dimensions start as undefined on the server and populate after hydration in JavaScript applications. Always handle the undefined state in your components.

Performance with many observers: Multiple ResizeObserver instances can impact performance in React frameworks. Consider consolidating observations or using a single observer for multiple elements when possible.

Box model browser support: Some box models like 'device-pixel-content-box' have limited browser support in TypeScript projects. Always provide fallbacks for better compatibility.

Related hooks you will also like

Questions you might have