Presence
Animation-aware mount/unmount. Delays unmounting until CSS exit animations complete.
import { Presence } from '@gentleduck/primitives/presence'import { Presence } from '@gentleduck/primitives/presence'Usage
<Presence present={isOpen}>
<div className="my-animated-element">Content</div>
</Presence><Presence present={isOpen}>
<div className="my-animated-element">Content</div>
</Presence>When present changes from true to false, Presence detects CSS animations on the child and waits for them to finish before unmounting. No JavaScript animation library needed.
Props
| Prop | Type | Description |
|---|---|---|
present | boolean | Whether the child should be mounted |
children | ReactElement | ((props: { present: boolean }) => ReactElement) | Child element or render function |
Render function form
For more control, use a render function:
<Presence present={isOpen}>
{({ present }) => (
<div className={present ? 'fade-in' : 'fade-out'}>
Content
</div>
)}
</Presence><Presence present={isOpen}>
{({ present }) => (
<div className={present ? 'fade-in' : 'fade-out'}>
Content
</div>
)}
</Presence>State machine
Presence uses three states: mounted (visible), unmountSuspended (animating out), and unmounted (removed from DOM).