1import { useEffect, useState } from "react";
2
3const useFadeOnMount = () => {
4 const [show, setShow] = useState(false);
5
6 useEffect(() => {
7 if (!show) {
8 setShow(true)
9 }
10 }, [show]);
11
12
13 const fadeProps = {
14 transition: `opacity 0.7s ease-in-out`,
15 opacity: show ? 1 : 0,
16 };
17
18 return [fadeProps];
19};
20
21export default useFadeOnMount;
22
23
24
25--------------other file
26import useFadeOnMount from "../../hooks/useFade"
27
28const [fadeProps] = useFadeOnMount();
29
30
31<div style={fadeProps}>
32 ...
33</div>