AutoSizer
Component documentation for AutoSizer.
AutoSizer
Component documentation for AutoSizer.
Typical scenarios:
- Smooth outer height transitions when switching Tabs content
- Smooth width transitions when a Button toggles
loading
Built on
ResizeObserver. When images/async rendering change size, it re-measures automatically.
Basic Usage
Height Only (Recommended for Tabs/Accordion)
AutoSizer height
Demo loads on client.
Width Follow (Inside Flex Containers)
When AutoSizer is a flex item and the parent stretches it with
flex: 1orwidth: 100%, it may look like it is not following content.
AutoSizer width in flex
Demo loads on client.
Pull-down Content Height Follow (Filters/Search)
AutoSizer height for dropdown
Demo loads on client.
Dialog Content Height Follow (Simulated)
AutoSizer height for dialog
Demo loads on client.
Width Only (Recommended for Button Content Changes)
AutoSizer width
Demo loads on client.
Number Transition + Width Follow (NumberFlow)
AutoSizer + NumberFlow
Demo loads on client.
Smooth Text Transform + Width Follow (TextTransformer)
This example enables
width + heightfollow and sets outeroverflow-hiddento clip blur overflow.
AutoSizer + TextTransformer
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | string | div | Description for as. |
innerAs | string | div | Description for innerAs. |
width | boolean | true | Description for width. |
height | boolean | true | Description for height. |
inline | boolean | - | Description for inline. |
durationMs | number | 200 | Description for durationMs. |
easing | string | ease | Description for easing. |
outerClass | string | overflow-hidden | outer class |
innerClass | string | - | inner class |
rounding | 'none' | 'round' | 'floor' | 'ceil' | ceil | TextValueText |
immediate | boolean | true | Description for immediate. |
rafBatch | boolean | true | Description for rafBatch. |
Expose
| Name | Type | Description |
|---|---|---|
refresh() | () => Promise<void> | Description for refresh(). |
flip(action) | (action: () => void | Promise<void>) => Promise<void> | Text action TriggerTextSizeText（Text Tabs Text/Text） |
action(fn, options?) | (fn: (el: HTMLElement) => void | Promise<void>, options?: AutoSizerActionOptions | detect) => Promise<any> | Text“Text”，TextTriggerText（Text demo/Text） |
size | Ref<{ width: number; height: number } | null> | Description for size. |
Was this helpful?