aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/effects/Appear.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ui/effects/Appear.tsx')
-rw-r--r--src/components/ui/effects/Appear.tsx21
1 files changed, 16 insertions, 5 deletions
diff --git a/src/components/ui/effects/Appear.tsx b/src/components/ui/effects/Appear.tsx
index bf097b6a6..2076f6ba6 100644
--- a/src/components/ui/effects/Appear.tsx
+++ b/src/components/ui/effects/Appear.tsx
@@ -5,11 +5,22 @@ interface IProps {
5 children: ReactNode; 5 children: ReactNode;
6 transitionName?: string; 6 transitionName?: string;
7 className?: string; 7 className?: string;
8 transitionAppear?: boolean;
9 transitionLeave?: boolean;
10 transitionAppearTimeout?: number;
11 transitionEnterTimeout?: number;
12 transitionLeaveTimeout?: number;
8} 13}
14
9const Appear = ({ 15const Appear = ({
10 children, 16 children,
11 transitionName = 'fadeIn', 17 transitionName = 'fadeIn',
12 className = '', 18 className = '',
19 transitionAppear = true,
20 transitionLeave = true,
21 transitionAppearTimeout = 1500,
22 transitionEnterTimeout = 1500,
23 transitionLeaveTimeout = 1500,
13}: IProps): ReactElement | null => { 24}: IProps): ReactElement | null => {
14 const [mounted, setMounted] = useState(false); 25 const [mounted, setMounted] = useState(false);
15 26
@@ -24,11 +35,11 @@ const Appear = ({
24 return ( 35 return (
25 <CSSTransitionGroup 36 <CSSTransitionGroup
26 transitionName={transitionName} 37 transitionName={transitionName}
27 transitionAppear 38 transitionAppear={transitionAppear}
28 transitionLeave 39 transitionLeave={transitionLeave}
29 transitionAppearTimeout={1500} 40 transitionAppearTimeout={transitionAppearTimeout}
30 transitionEnterTimeout={1500} 41 transitionEnterTimeout={transitionEnterTimeout}
31 transitionLeaveTimeout={1500} 42 transitionLeaveTimeout={transitionLeaveTimeout}
32 className={className} 43 className={className}
33 > 44 >
34 {children} 45 {children}