react-virtualized-auto-sizer

react-virtualized-auto-sizer measures the available width and height of its parent HTMLElement and passes those dimensions as props to a child render function or component. It began as the AutoSizer component extracted from the original react-virtualized library and was made standalone for use with react-window, giving virtualization libraries — and any component that needs to fill and react to its container’s dimensions — a reliable, dependency-free way to know how much space is available.

The library exposes both a classic render-prop <AutoSizer> component and a useSize hook for measuring an element imperatively, built on native ResizeObserver under the hood. The maintainer notes that newer versions of react-window use ResizeObserver directly and no longer need this package, but it remains widely used by other virtualization and layout code that hasn’t made that jump.

What You Get

• An <AutoSizer> render-prop component that reports {width, height} of its parent container
• A useSize hook for measuring an element’s dimensions directly in function components
• Options to disable width or height measurement independently (disableWidth/disableHeight)
• A defaultWidth/defaultHeight fallback for consistent server-side rendering output
• Built on native ResizeObserver rather than polling or window-resize listeners

Common Use Cases

• Sizing a react-window or react-virtualized list/grid to exactly fill its parent container
• Making any fixed-size chart, canvas, or map component responsive to its flex/grid container
• Building resizable dashboard panels where child content needs to know the panel’s current pixel dimensions
• Measuring a container for responsive layout decisions without hardcoding breakpoints

Under The Hood

Architecture The published package’s core lives in lib/components/AutoSizer.tsx (71 lines), a thin component that renders a full-size wrapper div and delegates the actual measuring logic to the useSize hook in lib/hooks/useSize.ts (153 lines), which sets up a ResizeObserver on the wrapper element and returns its current {width, height} reactively; lib/vendor/detectElementResize.js retains a legacy resize-detection fallback vendored from the original react-virtualized implementation for environments without ResizeObserver. The repository is a monorepo-shaped workspace where lib/ is the actual publishable library and src/, index.tsx, and vite.config.ts build the project’s documentation/demo site (deployed to Vercel) — the demo site is not part of the npm package. Tech Stack TypeScript throughout, built with Vite/pnpm workspaces, using native browser ResizeObserver as the sole measurement mechanism with no runtime dependencies beyond React itself as a peer dependency. Code Quality lib/components/AutoSizer.test.tsx and a lib/utils/test directory cover the core measuring behavior, tested via Vitest (vitest.config.ts, vitest.setup.ts); the project maintains a documented FAQ and example site alongside the code, and CHANGELOG.md tracks releases carefully given the library’s role as infrastructure for other virtualization packages. API Design The API is intentionally minimal — a single <AutoSizer> component taking a render-prop child plus a handful of boolean/number options, and an equivalent useSize hook for hook-based code — making integration a one-line wrap around existing virtualized-list code with almost no configuration required.