React Component that allows to delay mounting/unmounting* (see examples) of a React component.
Reason behind it: facebook/react#8280
In order for the component to work with
ReactCSSTransitionGroup
, it must be called withinDelayMount
<DelayMount transitionEnterDelay={1000}>
<ReactCSSTransitionGroup transitionName="custom-transition" transitionEnterTimeout={2000}>
<h1>{'Hello World'}</h1>
</ReactCSSTransitionGroup>
</DelayMount>
Delaying leave is with component lifecycle hooks is not possible as a plain React component lifecycle componentWillUnmount
function doesn't support async behaviour (callbacks, promises).
A workaround is to manage the mounted state outside of DelayMount
and pass it in as render
.
DelayMount
will wait for ReactCSSTransitionGroup
to leave then it will remove the component from the DOM.
Doesn't work if unmounting
DelayMount
itself
const show = false;
const leaveTimeout = 1000;
<DelayMount
render={show}
// Delay unmounting by specifing the duration of the
transitionLeaveTimeout={leaveTimeout}
>
<ReactCSSTransitionGroup
transitionName="custom-transition"
transitionLeaveTimeout={leaveTimeout}
>
{show && (<h1>{'Hello World'}</h1>)}
</ReactCSSTransitionGroup>
</DelayMount>