react-css-animated

> React css animation based on animate.css

 

Install

``bash
npm install --save react-css-animated
`

Usage

`jsx
import React, { Component } from 'react';

import Animated from 'react-css-animated';

class Title extends Component {
render () {
return (



Animate



);
}
}
`

propTypes

`jsx
Animated.propTypes = {
className: PropTypes.string,
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
tag: PropTypes.string,
style: PropTypes.object,
isVisible: PropTypes.bool,
/ you can use your own animations /
animations: PropTypes.object,
/ eslint-disable react/no-unused-prop-types /
/ These props are used in an external function getAnimatedState /
animationIn: PropTypes.string,
animationOut: PropTypes.string,
delay: timeShape,
duration: timeShape,
easing: easingShape,
/ eslint-enable /
animateOnMount: PropTypes.bool,
children: PropTypes.node,
/*
renderContent description:
Elements always come new, so there is a reason to rerender.
To avoid rerender use the function renderContent instead children.
*/
renderContent: PropTypes.func,
data: PropTypes.any,
onClick: PropTypes.func,
};

Animated.defaultProps = {
tag: 'div',
style: {},
animations: {},
isVisible: true,
animationIn: 'fadeIn',
animationOut: 'fadeOut',
delay: 0,
duration: 300,
easing: 'ease',
animateOnMount: false,
};

const timeShape = PropTypes.oneOfType([
PropTypes.number,
PropTypes.shape({
in: PropTypes.number,
out: PropTypes.number,
}).isRequired,
]);

const easingShape = PropTypes.oneOfType([
PropTypes.string,
PropTypes.shape({
in: PropTypes.string,
out: PropTypes.string,
}).isRequired,
]);
``

License

MIT © Alexander Lyalikhov