Skip to content

Small component for delaying the mounting and unmounting of a child component for CSS animation purposes.

License

Notifications You must be signed in to change notification settings

Wildhoney/ReactDelayed

Repository files navigation

React Delayed

Small component for delaying the mounting and unmounting of a child component for CSS animation purposes.

Travis   Coveralls   npm   License MIT


Getting Started

Use the optional mountAfter and unmountAfter props for delaying the mounting and unmounting of nested components.

<Delayed mounted={true} mountAfter={500} unmountAfter={500}>
    <img src="./images/nyan.gif" alt="Nyan" />
</Delayed>

When mounted is false a dummy node will be rendered, which defaults to span and can be changed with the nodeName prop.

You're also able to pass a thunk as the children for truly deferred components.

<Delayed mounted={true} mountAfter={500} unmountAfter={500}>
    {() => <img src="./images/nyan.gif" alt="Nyan" />}
</Delayed>