Need help with react-fade-in?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gkaemmer
216 Stars 25 Forks MIT License 46 Commits 1 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 307,630
HTML
TypeScr...
React
pdf-vie...
27 commits
# 612,334
HTML
TypeScr...
2 commits
# 663,513
HTML
TypeScr...
2 commits
# 159,181
TypeScr...
HTML
Shell
watson
1 commit
# 696,153
HTML
TypeScr...
1 commit

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.
  • 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.

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.