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);
}
About uni rakun
uni rakun is created by two passionate french developers.
Do you want to contact them ? Go to their website
 |
 |
| Guillaume CRESPEL | Fabien JUIF |