react-fade-in

by gkaemmer

gkaemmer / react-fade-in

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

161 Stars 20 Forks Last release: over 2 years ago (v0.1.6) MIT License 28 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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';
// ...

  
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6

API

FadeIn

Animates its children, one by one.

Note: To have children animate separately, they must be first-level children of the

 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.

Happy fading.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.