Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devsrv/react-easy-animate
Animate react components using css classes with ease 🤟
https://github.com/devsrv/react-easy-animate
animatecss animation animation-css react reactjs
Last synced: 28 days ago
JSON representation
Animate react components using css classes with ease 🤟
- Host: GitHub
- URL: https://github.com/devsrv/react-easy-animate
- Owner: devsrv
- License: mit
- Created: 2019-11-13T11:15:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T11:42:24.000Z (about 2 years ago)
- Last Synced: 2024-12-23T02:06:56.856Z (about 2 months ago)
- Topics: animatecss, animation, animation-css, react, reactjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-easy-animate
- Size: 930 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-easy-animate
> A micro react component that lets you manage entry and exit animation of your react components using css classes with ease
[](https://www.npmjs.com/package/react-easy-animate)
[](https://www.npmjs.com/package/react-easy-animate)
[](https://github.com/devsrv/react-easy-animate/blob/master/LICENSE)
### Check the interactive example: https://devsrv.github.io/react-easy-animate-example/
## 📋 Features
- **Control entry & exit animation** - css animation class to use when component appearing & disappearing
- **Animation delay & duration** - manage animation delay and duration for both entry & exit animations
- **Hook into animationEnd events** – access to all animation end events that you can act to
## 📥 Installation
Using [npm](https://www.npmjs.com/package/react-easy-animate):
$ npm i react-easy-animate --save
## 🧪 Usage
### Basic Example
```js
import React, { Component } from 'react';
import Animatable from 'react-easy-animate';
class Main extends Component {
state = {
show: true,
}
render() {
return (
Lorem ipsum dolor sit amet
this.setState((state) => ({show: !state.show}))}>
click
)
}
}
render(, document.getElementById('root'));
```
___
### Example with [animate.css](https://daneden.github.io/animate.css/)
```js
import React, { Component } from 'react';
import { render } from 'react-dom';
import Animatable from 'react-easy-animate';
require("animate.css");
export default class Main extends Component {
state = {
show: true,
disabled: false
}
render() {
return (
this.setState({disabled: false})}
onEntryAnimationEnd={() => this.setState({disabled: false})}
>
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
this.setState((state) => ({show: !state.show, disabled: true}))}>
{this.state.show? "HIDE" : "SHOW"}
)
}
}
render(, document.getElementById('root'));
```
## 📚 API
### Props
| Property | Type | Default | Required | Description |
|-|:-:|:-:|:-:|-|
|show|bool|`undefined`| ✓ |whether to show or hide the component. |
| entryAnimation |array|`zoomIn` | | *css classes* responsible for animating the component when the component is appearing from a disappeared state|
|exitAnimation|array|`zoomOut`| | *css classes* responsible for animating the component when the component is disappearing from a visible state|
|onExitAnimationEnd|func|`undefined`| | function to call when the disappearing animation ends |
|onEntryAnimationEnd|func|`undefined`| | function to call when the appearing animation ends |
|entryAnimDelay|string|`undefined`| | css `animation-delay` value for the appearing animation |
|entryAnimDuration|string|`undefined`| | css `animation-duration` value for the appearing animation |
|exitAnimDelay|string|`undefined`| | css `animation-delay` value for the disappearing animation |
|exitAnimDuration|string|`undefined`| | css `animation-duration` value for the disappearing animation |
---
## 👋🏼 Say Hi!
Leave a ⭐ if you find this package useful 👍🏼,
don't forget to let me know in [Twitter](https://twitter.com/srvrksh)