hoc-react-animate v0.3.0

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:

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);
}