https://github.com/wildhoney/reactdelayed

Small component for delaying the mounting and unmounting of a child component for CSS animation purposes.
https://github.com/wildhoney/reactdelayed

css-animations defer deferred delay delayed mount mounting react render timeout unmount unmounting wait

Last synced: 16 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/wildhoney/reactdelayed
• Owner: Wildhoney
• License: mit
• Created: 2017-05-11T20:28:12.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-22T10:46:39.000Z (over 7 years ago)
• Last Synced: 2025-07-04T09:54:16.710Z (3 months ago)
• Topics: css-animations, defer, deferred, delay, delayed, mount, mounting, react, render, timeout, unmount, unmounting, wait
• Language: JavaScript
• Homepage: https://react-delayed.herokuapp.com/
• Size: 227 KB
• Stars: 21
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Delayed

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

![Travis](http://img.shields.io/travis/Wildhoney/ReactDelayed.svg?style=flat-square)

 

![Coveralls](https://img.shields.io/coveralls/Wildhoney/ReactDelayed.svg?style=flat-square)

 

![npm](http://img.shields.io/npm/v/react-delayed.svg?style=flat-square)

 

![License MIT](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat-square)

* **npm**: `npm i react-delayed --save`

* **Heroku**: [http://react-delayed.herokuapp.com/](http://react-delayed.herokuapp.com/)

---

## Getting Started

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

```javascript

    

```

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.

```javascript

    {() => }

```