diff options
Diffstat (limited to 'src/components/ui/effects/Appear.tsx')
-rw-r--r-- | src/components/ui/effects/Appear.tsx | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx new file mode 100644 index 000000000..117c02f97 --- /dev/null +++ b/src/components/ui/effects/Appear.tsx | |||
@@ -0,0 +1,39 @@ | |||
1 | import { ReactChildren, useEffect, useState } from 'react'; | ||
2 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; | ||
3 | |||
4 | type Props = { | ||
5 | children: ReactChildren; | ||
6 | transitionName: string; | ||
7 | className: string; | ||
8 | }; | ||
9 | const Appear = ({ | ||
10 | children, | ||
11 | transitionName = 'fadeIn', | ||
12 | className = '', | ||
13 | }: Props) => { | ||
14 | const [mounted, setMounted] = useState(false); | ||
15 | |||
16 | useEffect(() => { | ||
17 | setMounted(true); | ||
18 | }, []); | ||
19 | |||
20 | if (!mounted) { | ||
21 | return null; | ||
22 | } | ||
23 | |||
24 | return ( | ||
25 | <ReactCSSTransitionGroup | ||
26 | transitionName={transitionName} | ||
27 | transitionAppear | ||
28 | transitionLeave | ||
29 | transitionAppearTimeout={1500} | ||
30 | transitionEnterTimeout={1500} | ||
31 | transitionLeaveTimeout={1500} | ||
32 | className={className} | ||
33 | > | ||
34 | {children} | ||
35 | </ReactCSSTransitionGroup> | ||
36 | ); | ||
37 | }; | ||
38 | |||
39 | export default Appear; | ||