zidanemotion/swap
import { … } from 'zidane-ui'ui/src/motion/swap.tsx
Components#
CrossfadeComponent#
Swaps content by key with a cross-fade: the previous node stays in the
same grid cell for the exit (readExitMs()) playing its exit while the new
one plays its enter; with motion off it is replaced at once. children === null is a valid state (empty slot).
function Crossfade(props: CrossfadeProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | CrossfadeProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| activeKey | string | number | Identity of the current content; a change triggers the swap. |
| align? | 'start' | 'end' |
|
| children | ReactNode | The current content. |
| className? | string | Extra classes on the wrapping cell. |
| settle? | boolean | For content inside something that is itself still appearing (a line fading in): a key change in its first moments replaces the content without a crossfade, since two lines fading over each other inside a line that is fading in reads as a flicker. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| variant? | 'text' | 'scale' |
|
PresenceComponent#
Keeps children mounted for the exit (readExitMs()) after show flips
false so the exit animation plays. Renders nothing once the exit is done.
function Presence(props: PresenceProps): Element | nullParameters
| Name | Type | Description |
|---|---|---|
| props | PresenceProps | Component props. |
Returns
Element | nullProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content to show and animate out. |
| className? | string | Extra classes on the wrapper (sizing, spacing). |
| display? | 'inline' | 'block' | Inline wrapper by default; |
| show | boolean | Whether the content is shown. When it turns false, the content stays mounted for its exit. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| variant? | 'text' | 'scale' |
|
Functions#
useCadencedValueFunction#
Hold a fast-changing value to a readable cadence: at most one change every
ms, the newest value always wins, and the last one always lands (a
trailing update fires when the source goes quiet). The first value shows
at once.
function useCadencedValue<T>(value: T, ms: number): TType parameters
| Name | Description |
|---|---|
| T |
Parameters
| Name | Type | Description |
|---|---|---|
| value | T | The source value, which may change faster than it should show. |
| ms | number | The minimum time between shown changes, in ms. |
Returns
TThe value to show.
Interfaces#
CrossfadePropsInterface#
Props for Crossfade.
interface CrossfadePropsProperties
| Name | Type | Description |
|---|---|---|
| activeKey | string | number | Identity of the current content; a change triggers the swap. |
| align? | 'start' | 'end' |
|
| children | ReactNode | The current content. |
| className? | string | Extra classes on the wrapping cell. |
| settle? | boolean | For content inside something that is itself still appearing (a line fading in): a key change in its first moments replaces the content without a crossfade, since two lines fading over each other inside a line that is fading in reads as a flicker. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| variant? | 'text' | 'scale' |
|
PresencePropsInterface#
Props for Presence.
interface PresencePropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The content to show and animate out. |
| className? | string | Extra classes on the wrapper (sizing, spacing). |
| display? | 'inline' | 'block' | Inline wrapper by default; |
| show | boolean | Whether the content is shown. When it turns false, the content stays mounted for its exit. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| variant? | 'text' | 'scale' |
|