React-animate-style NPM

react-animate-style

Easy animate react app with animate.css library

Install

With npm :

npm install --save react-animate-style

With yarn :

yarn add react-animate-style

Usage

Import Animation component from react-animate-style and wrap your content with <Animation>[...]</Animation> tags. Availables props to configure animation are described in Props section

import {Animation} from 'react-animate-style'


class Example extends Component {
  render() {
    return <Animation animationIn="bounceIn" animationOut="bounceOut" >
      <div>My animated content</div>
    </Animation>
  }
}

Props

`animationIn`

The animation to use when the component mounts or when isVisible change to true. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste

`animationOut`

The animation to use when the component unmounts or when isVisible change to false. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste

`animationInDelay`

The delay in miliseconds to wait before start the entrance animation. For example, to wait 1 second before start animation, you need to set this props to 1000

`animationOutDelay`

The delay in miliseconds to wait before start the exit animation. For example, to wait 1 second before start animation, you need to set this props to 1000

`animationInDuration`

The duration in miliseconds of the entrance animation. By default it set to 1000 or 1 second

`animationOutDuration`

The duration in miliseconds of the exit animation. By default it set to 1000 or 1 second

`isVisible`

Display or not the content. Set this to true to start the entrance animation (if defined) and display this component. Set this to false to start the exit animation (if defined) and hide this component. By default, this parameter is set to true. In this way, if you not provide this props, content of Animation is automatically animated and displayed on render.

Note : Exit animation is started when isVisible is set to false only if isVisible was set to true in a previous state. If isVisible receive false as initial state, content is hidden but not animation was launched on render.