Shadowgraph
TrendingBuzzResearch
Chrome extension
Sign in

bvaughn/react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized

TypeScript

669

164 commits

updated Mar 28, 2026

react-virtualized-auto-sizer.vercel.app

See the code

README

react-virtualized-auto-sizer logo

react-virtualized-auto-sizer: Measures the available width and height of an HTMLElement and passes those values as props to a Child component. Refer to the docs for usage examples.

[!NOTE] This package began as a fork of the AutoSizer component from react-virtualized, and was intended for use with earlier versions of react-window. More recent versions of react-window use ResizeObserver natively and do not require this package.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Install

npm install --save react-virtualized-auto-sizer

FAQs

Frequently asked questions can be found here.

Documentation

AutoSizer

Measures the available width and height of its parent HTMLElement and passes those values as width and height props to its children.

ℹ️ This component began as a fork of the javascript-detect-element-resize package.

Required props

None

Optional props

NameDescription
box

Corresponds to the ResizeObserver box parameter. Sets which box model the observer will observe changes to.

  • border-box: Size of the box border area as defined in CSS.
  • content-box: Size of the content area as defined in CSS.
  • device-pixel-content-box: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
className

Class name to be applied to the auto-sizer HTMLElement.

data-testid

Test id attribute to interop with frameworks like Testing Library.

id

Unique id attribute to attach to root DOM element.

nonce

Nonce used for inline StyleSheet in browsers/environments that do not support the ResizeObserver API.

onResize

Optional callback notified after a resize. @param size New width and height of parent element

style

Style properties to be applied to the auto-sizer HTMLElement.

tagName

Optional HTML tag name for root HTMLElement; defaults to "div".

Child

Child component to be passed the available width and height values as props. @deprecated Use the ChildComponent or renderProp props instead.

ChildComponent

Child component to be passed the available width and height values as props.

ℹ️ Use renderProp instead if you need access to local state.

⚠️ Width and height are undefined during the during the initial render (including server-rendering).

renderProp

Render prop to be passed the available width and height values as props.

ℹ️ Use ChildComponent instead for better memoization if you do not need access to local state.

⚠️ Width and height are undefined during the during the initial render (including server-rendering).

layout
react
reactjs
resize
size
virtualization
windowing

Project health

Overall

2.8/10

Maintained

0/10

Code review

0/10
OpenSSF Scorecard

npm

react-virtualized-auto-sizer

Latest release

2.0.3 · Feb 13, 2026

Releases this year

4

Significant stargazers

Tom Ballinger

554 followers · starred Apr 2023

Ade Viankakrisna Fadlil

177 followers · starred Jun 2018

Will Madden

43 followers · starred Sep 2023

Greg Deane

67 followers · starred Apr 2023

Similar repos

bvaughn/react-resizable-panels

5,395

same org

bvaughn/react-virtualized

React components for efficiently rendering large lists and tabular data

27,074

same org

bvaughn/react-window

React components for efficiently rendering large lists and tabular data

17,201

same org

ctrlplusb/react-sizeme

Make your React Components aware of their width and height!

1,959

ZeeCoder/use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.

682

maslianok/react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React

1,301

souporserious/react-measure

📏 Compute measurements of a React component.

1,939

bokuweb/re-resizable

📏 A resizable component for React.

2,666

bvaughn/react-virtualized-auto-sizer

Standalone version of the AutoSizer component from react-virtualized

TypeScript

669

164 commits

updated Mar 28, 2026

react-virtualized-auto-sizer.vercel.app

See the code

README

react-virtualized-auto-sizer logo

react-virtualized-auto-sizer: Measures the available width and height of an HTMLElement and passes those values as props to a Child component. Refer to the docs for usage examples.

[!NOTE] This package began as a fork of the AutoSizer component from react-virtualized, and was intended for use with earlier versions of react-window. More recent versions of react-window use ResizeObserver natively and do not require this package.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Install

npm install --save react-virtualized-auto-sizer

FAQs

Frequently asked questions can be found here.

Documentation

AutoSizer

Measures the available width and height of its parent HTMLElement and passes those values as width and height props to its children.

ℹ️ This component began as a fork of the javascript-detect-element-resize package.

Required props

None

Optional props

NameDescription
box

Corresponds to the ResizeObserver box parameter. Sets which box model the observer will observe changes to.

  • border-box: Size of the box border area as defined in CSS.
  • content-box: Size of the content area as defined in CSS.
  • device-pixel-content-box: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
className

Class name to be applied to the auto-sizer HTMLElement.

data-testid

Test id attribute to interop with frameworks like Testing Library.

id

Unique id attribute to attach to root DOM element.

nonce

Nonce used for inline StyleSheet in browsers/environments that do not support the ResizeObserver API.

onResize

Optional callback notified after a resize. @param size New width and height of parent element

style

Style properties to be applied to the auto-sizer HTMLElement.

tagName

Optional HTML tag name for root HTMLElement; defaults to "div".

Child

Child component to be passed the available width and height values as props. @deprecated Use the ChildComponent or renderProp props instead.

ChildComponent

Child component to be passed the available width and height values as props.

ℹ️ Use renderProp instead if you need access to local state.

⚠️ Width and height are undefined during the during the initial render (including server-rendering).

renderProp

Render prop to be passed the available width and height values as props.

ℹ️ Use ChildComponent instead for better memoization if you do not need access to local state.

⚠️ Width and height are undefined during the during the initial render (including server-rendering).

layout
react
reactjs
resize
size
virtualization
windowing

Project health

Overall

2.8/10

Maintained

0/10

Code review

0/10
OpenSSF Scorecard

npm

react-virtualized-auto-sizer

Latest release

2.0.3 · Feb 13, 2026

Releases this year

4

Significant stargazers

Tom Ballinger

554 followers · starred Apr 2023

Ade Viankakrisna Fadlil

177 followers · starred Jun 2018

Will Madden

43 followers · starred Sep 2023

Greg Deane

67 followers · starred Apr 2023

Similar repos

bvaughn/react-resizable-panels

5,395

same org

bvaughn/react-virtualized

React components for efficiently rendering large lists and tabular data

27,074

same org

bvaughn/react-window

React components for efficiently rendering large lists and tabular data

17,201

same org

ctrlplusb/react-sizeme

Make your React Components aware of their width and height!

1,959

ZeeCoder/use-resize-observer

A React hook that allows you to use a ResizeObserver to measure an element's size.

682

maslianok/react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React

1,301

souporserious/react-measure

📏 Compute measurements of a React component.

1,939

bokuweb/re-resizable

📏 A resizable component for React.

2,666