Skip to main content

Function: useTransitionState()

useTransitionState(visible, duration?): UseTransitionStateReturn

Defined in: hooks/useTransitionState/index.ts:33

useTransitionState

Parameters​

visible​

boolean

Whether the content should be visible.

duration?​

number = 250

The transition duration in milliseconds. Should match the CSS transition duration used for the enter/exit animation.

Returns​

UseTransitionStateReturn

Whether to render, and the current transition phase.

Description​

A custom hook that coordinates mount/unmount timing around a CSS transition, so a component can keep rendering long enough to play its exit animation instead of disappearing instantly when visible flips to false.

Example​

const { shouldRender, phase } = useTransitionState(visible, 400);
if (!shouldRender) return null;
return <div className={phase === 'entered' ? 'modal visible' : 'modal'}>...</div>;