filestash/client/components/animation.js

import React, { useState, useEffect } from "react";

/*
 * Back when I started this project, there used to be a library for animation made by facebook
 * named: react-addons-css-transition-group
 * Facebook got away from it and things haven't stayed backward compatible at the point where I got
 * to realise it would be easier to write this simpler wrapper than migrate things over
 */
export function CSSTransition({
    transitionName = "animate", children = null, transitionAppearTimeout = 300,
}) {
    const [className, setClassName] = useState(`${transitionName} ${transitionName}-appear`);

    useEffect(() => {
        setClassName(`${transitionName} ${transitionName}-appear ${transitionName}-appear-active`);

        const timeout = setTimeout(() => {
            setClassName(`${transitionName}`);
        }, transitionAppearTimeout);
        return () => clearTimeout(timeout);
    }, []);

    return (
        <div className={className}>
            { children }
        </div>
    );
}