Skip to content

gkaemmer/react-fade-in

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

react-fade-in

Dead-simple and opinionated component to fade in an element's children.

React Fade In

Installation

npm install react-fade-in

Usage

react-fade-in

import FadeIn from 'react-fade-in';
// ...
<FadeIn>
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
  <div>Element 6</div>
</FadeIn>

API

FadeIn

Animates its children, one by one.

Note: To have children animate separately, they must be first-level children of the <FadeIn> component (i.e. members of its props.children).

Props

  • delay: Default: 50. Delay between each child's animation in milliseconds.
  • transitionDuration: Default: 400. Duration of each child's animation in milliseconds.
  • className: No default. Adds a className prop to the container div.
  • childClassName: No default. Adds a className prop to each child div, allowing you to style the direct children of the FadeIn component.
  • wrapperTag: Default: "div". Override the HTML element of the wrapping div.
  • childTag: Default: "div". Override the HTML element wrapped around each child element.
  • visible: New in 2.0.0: If not undefined, the visible prop can be used to control when the fade in occurs. If set to false after the fade-in animation completes, the children will fade out one by one.
  • onComplete: New in 2.0.0: specifies a callback to be called when the animation completes.

Happy fading.