AutoSizer
A container that animates to fit its content's size.
Usage
Height Only
Syncs only the height, so the surrounding layout keeps its width; wrap the state change in action().
Loading demo...
Width in a Flex Container
As a flex item, don't stretch it with flex: 1 or width: 100%, or its width stops following the content.
Loading demo...
Width Only
Syncing only the width shrinks it to its content, which suits changing button labels.
Loading demo...
Number Transition
With TxTextMorph, the width follows as the digit count changes.
Loading demo...
Text Transform
Width and height both follow; the default outerClass="overflow-hidden" clips the blur's overflow.
Loading demo...
Best Practices
- Sync only the height for content areas (tabs, accordions, dropdowns) and only the width for buttons, labels, and numbers.
- Keep
outerClass="overflow-hidden"when content animates with blur, scale, or FLIP. - Wrap explicit state changes in
action()orflip()rather than changing state and callingrefresh(), which loses the before/after snapshot the transition needs. - Set
observeTarget="both"only when the wrapper and the content resize independently. - Keep
rounding="ceil"for text to avoid sub-pixel clipping; useflooronly when a parent needs tighter bounds.
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | string | div | Outer element tag. |
innerAs | string | div | Inner element tag. |
width | boolean | true | Syncs the width. |
height | boolean | true | Syncs the height. |
inline | boolean | - | Shrinks to the content width; when omitted, on only in width-only mode. |
durationMs | number | 200 | Transition duration in ms. |
easing | string | ease | Transition timing function. |
outerClass | string | overflow-hidden | Outer class, applied before forwarded classes. |
innerClass | string | - | Inner class. |
rounding | 'none' | 'round' | 'floor' | 'ceil' | ceil | How measured values are rounded. |
immediate | boolean | true | Measures right after mount. |
rafBatch | boolean | true | Batches measurements with rAF. |
observeTarget | 'inner' | 'outer' | 'both' | inner | Element watched for size changes. |
Slots
| Slot | Description |
|---|---|
default | Measured content, rendered in the inner wrapper. |
Exposed Methods
| Name | Type | Description |
|---|---|---|
refresh() | () => Promise<void> | Re-measures. |
flip(action) | (action: () => void | Promise<void>) => Promise<void> | Runs action inside a size FLIP transition. |
action(fn, options?) | (fn: (el: HTMLElement) => void | Promise<void>, options?: AutoSizerActionOptions | detect) => Promise<any> | Runs a change on the inner or outer element with a transition; returns before/after snapshots and changedKeys. |
size | { width: number; height: number } | null | The last measured size. |
focus() | () => void | Focuses the outer wrapper when it is focusable. |
outerEl | HTMLElement | null | The outer wrapper element. |
Overview
- Forwarded attrs land on the outer wrapper, merged with
outerClassand the sizing styles; the inner wrapper holds the measured content withdisplay: flow-root. - It re-measures whenever the content's size changes, including image loads and async rendering.
flip()andaction()pause automatic measurement while they run and re-measure after the transition.
Technologies
- Automatic measurement runs on
ResizeObserver; explicit changes use a size FLIP. - Source:
packages/tuffex/packages/components/src/auto-sizer/.
查看源码
packages/tuffex/packages/components/src/auto-sizer/index.ts