React Delayed

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/

---

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>