Answers for "react fade on mount"

react fade on mount

import { useEffect, useState } from "react";

const useFadeOnMount = () => {
    const [show, setShow] = useState(false);

    useEffect(() => {
        if (!show) {
            setShow(true)
        }
    }, [show]);


    const fadeProps = {
        transition: `opacity 0.7s ease-in-out`,
        opacity: show ? 1 : 0,
    };

    return [fadeProps];
};

export default useFadeOnMount;



--------------other file
import useFadeOnMount from "../../hooks/useFade"

const [fadeProps] = useFadeOnMount();


<div style={fadeProps}>
  ...
</div>