zidanemotion/size
import { … } from 'zidane-ui'ui/src/motion/size.tsx
Components#
HeldWidthComponent#
Renders a trailing slot whose width grows to fit its content and never shrinks while
holdKey stays the same, so a label that changes often does not make its neighbours move.
When holdKey changes, it eases to the new content's width once the old content has faded.
function HeldWidth(props: HeldWidthProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | HeldWidthProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The slot's content. It sits against the right edge. |
| className? | string | Extra classes on the outer element. |
| holdKey | string | Identifies the mode of the slot. The held width is released when it changes. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
SmoothHeightComponent#
A block whose height eases when its content is swapped, instead of jumping: the old height is held in the
frame the new content lands, then eases to the new one (settle), then lets go. Nothing collapses to be
measured (the content keeps its own height inside), so a transcript following its bottom follows the ease
frame by frame. At once with motion off or reduced.
function SmoothHeight(props: SmoothHeightProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | SmoothHeightProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content. |
| className? | string | Extra classes on the outer element. |
| swapKey | string | What the content is: when it changes (live lines giving way to a result), the height eases from the old content's to the new one's. Between changes the height follows the content at once (it animates itself). |
SmoothWidthComponent#
Animates its own width to its content's, so a chip that gains a segment or a digit grows smoothly instead of jumping. The content is measured with a ResizeObserver; the first size applies without a transition.
function SmoothWidth(props: SmoothWidthProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | SmoothWidthProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content to size to. |
| className? | string | Extra classes on the outer element. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
Interfaces#
HeldWidthPropsInterface#
Props for HeldWidth.
interface HeldWidthPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The slot's content. It sits against the right edge. |
| className? | string | Extra classes on the outer element. |
| holdKey | string | Identifies the mode of the slot. The held width is released when it changes. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
SmoothHeightPropsInterface#
Props for SmoothHeight.
interface SmoothHeightPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content. |
| className? | string | Extra classes on the outer element. |
| swapKey | string | What the content is: when it changes (live lines giving way to a result), the height eases from the old content's to the new one's. Between changes the height follows the content at once (it animates itself). |
SmoothWidthPropsInterface#
Props for SmoothWidth.
interface SmoothWidthPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content to size to. |
| className? | string | Extra classes on the outer element. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |