react-easy-animate

A micro react component that lets you manage entry and exit animation of your react components using css classes with ease

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:

$ npm i react-easy-animate --save

🧪 Usage

Basic Example

import React, { Component } from 'react';
import Animatable from 'react-easy-animate';

class Main extends Component {
    state = {
        show: true,
    }

    render() {
        return (
            <div className="col">
                <Animatable show={this.state.show}>
                    <p>Lorem ipsum dolor sit amet</p>
                </Animatable>
                
                <button type="button" 
                    onClick={() => this.setState((state) => ({show: !state.show}))}>
                    click
                </button>
            </div>
        )
    }
}

render(<Main />, document.getElementById('root'));

---

Example with animate.css

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 (
                <div className="col">
                    <Animatable 
                        show={this.state.show}
                        entryAnimation={["zoomIn"]}
                        exitAnimation={["zoomOutDown", "faster"]}
                        onExitAnimationEnd={() => this.setState({disabled: false})}
                        onEntryAnimationEnd={() => this.setState({disabled: false})}
                    >
                        <div className="card">
                            <div className="card-body">
                                <h5 className="card-title">Lorem ipsum dolor sit amet</h5>
                                <Animatable 
                                    entryAnimDelay="1s" 
                                    show={this.state.show}
                                >
                                    <p>Lorem ipsum dolor sit amet</p>
                                </Animatable>
                            </div>
                        </div>
                    </Animatable>

                    <button type="button" 
                        disabled={this.state.disabled} 
                        onClick={() => this.setState((state) => ({show: !state.show, disabled: true}))}>
                            {this.state.show? "HIDE" : "SHOW"}
                    </button>
                </div>
        )
    }
}

render(<Main />, 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