react-fade-in

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

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.

v0.0.1

• Initial version

v0.1.5

• Prevent setState on unmounted Fade component. (thanks to @Themandunord)

v0.1.6

• Added delay and transitionDuration props.

v0.1.7

• Pass className prop through to container element. (thanks to @Deveosys)

v0.1.8

• Add childClassName prop to allow styling for child divs. (thanks to @Deveosys)

v1.0.0

• Use transform: translateY(...) instead of position: relative and top to animate elements. This is a breaking change if you rely on position: relative on the child divs. Thanks to @bogdansoare for the suggestion.

v1.1.0

• Add wrapperTag and childTag props. Thanks to @domarp-j.

v1.1.1

• Transition to transform: none instead of transform: translateY(0). Thanks to @atnpcg.

v2.0.0

• Add visible, onComplete props. Rewrite component using typescript and react hooks. New children added after the initial render are now also animated.