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>