Small component for delaying the mounting and unmounting of a child component for CSS animation purposes.
- npm:
npm i react-delayed --save - Heroku: http://react-delayed.herokuapp.com/
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>