react-appear-in

Make React components render sometime in the future.

Delay rendering any component with minutes, seconds, or milliseconds, and show a placeholder while it waits. 

import AppearIn from "react-appear-in";

<AppearIn seconds={5}>
  Hello after five seconds
</AppearIn>
Copy

Try It Live

Adjust the delay and watch the component move from its placeholder to its content.

Install

Add the package with your preferred package manager. 

npm install react-appear-in
Copy 
pnpm add react-appear-in
Copy 
yarn add react-appear-in
Copy

API

The library exports one React component, AppearIn. Here are its props.

  • minutes?, seconds?, milliseconds? Delay units combined into one total delay.
  • placeholder? Content rendered while the children are hidden.
  • onAppear? Callback invoked with the total delay when the children render.