https://github.com/unirakun/hoc-react-animate
Add a CSS class whenever a props change (or/and at mount)
https://github.com/unirakun/hoc-react-animate
animate hoc nantes react zenika
Last synced: 3 months ago
JSON representation
Add a CSS class whenever a props change (or/and at mount)
- Host: GitHub
- URL: https://github.com/unirakun/hoc-react-animate
- Owner: unirakun
- License: mit
- Created: 2016-08-16T14:54:46.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2020-02-05T15:17:38.000Z (over 6 years ago)
- Last Synced: 2025-08-16T12:43:13.816Z (11 months ago)
- Topics: animate, hoc, nantes, react, zenika
- Language: JavaScript
- Homepage: https://unirakun.github.io/hoc-react-animate/
- Size: 281 KB
- Stars: 14
- Watchers: 17
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://react-animate.firebaseapp.com/).
## 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**
```(javascript)
import React, { PropTypes } from 'react'
import animate from 'hoc-react-animate'
const Component = ({ className, text }) => {
return (
{text}
)
}
Component.propTypes = {
className: PropTypes.string,
text: PropTypes.string,
}
export default animate(
Component,
{
watchedProps: ['text'],
timeout: 200,
}
)
```
**css**
```(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](https://unirakun.fr)
