Animate your components on state change

by React

react-animate-on-change

Animate your react components on props or state changes, in contrast to entries added/removed from arrays.

Install

npm install react-animate-on-change react

Usage

import AnimateOnChange from 'react-animate-on-change'
// CommonJS:
// const AnimateOnChange = require('react-animate-on-change').default

// functional component
const Score = (props) =>
  <AnimateOnChange
    baseClassName="Score"
    animationClassName="Score--bounce"
    animate={props.diff != 0}>
      Score: {props.score}
  </AnimateOnChange>

The example above will (roughly) render to:

On enter or changes in props.diff or props.score:

<span class="Score Score--bounce">
  <span>Score: 100</span>
</span>

On animation end:

<span class="Score">
  <span>Score: 100</span>
</span>

Also, see the example folder.

Props

baseClassName {string} : Base class name that be added to the component.

animationClassName {string} : Animation class name. Added when animate == true. Removed when the event animationend is triggered.

animate {bool} : Whether component should animate.

customTag {string} : HTML tag of the component.

onAnimationEnd {() => void)} : Callback which is called when animation ends.

Develop

npm start

Add tests in test.js and hack away.

Known issues

  • The browser must support CSS3 animations.

GitHub