hoc-react-animate

what is this?

This is a higher order component ("HOC") that adds a CSS class to its child component whenever a prop change or at mount (or both) to animate it.

try it

You can test some examples here.

install

npm i --save hoc-react-animate

use

You have to wrap your component, and give some informations:

Parameter	Required	Default value	Description
watchedProps	no	[]	The props to watch (they are compared with lodash.isEqual)
timeout	no	1000	The time (in ms) for which the CSS class is applied to the wrapped component
className	no	'animate'	The class to add when a prop changes (or at mount)
atMount	no	false	Set to true if you want to animate the component at mount

Component.js

import React, { PropTypes } from 'react'
import animate from 'hoc-react-animate'
 
const Component = ({ className, text }) => {
  return (
    <div
      className={`component ${className}`}
    >
      {text}
    </div>
  )
}
 
Component.propTypes = {
  className: PropTypes.string,
  text: PropTypes.string,
}
 
export default animate(
  Component,
  {
    watchedProps: ['text'],
    timeout: 200,
  }
)

css

.component {
  transition: all .2s;
}
.component.animate {
  transform: scale(2);
}