1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import React from 'react'
import clsxm from '~/libs/clsxm'
type Props = {
children: React.ReactNode,
isLoaded: boolean,
height: string,
duration?: string
delay?: string
} & React.HTMLProps<HTMLDivElement>
const SmoothRender = (props: Props) => {
const {
children,
isLoaded,
height,
duration = 0,
delay = 0,
style,
className,
...rest
} = props
return (
<div
className={clsxm('overflow-y-hidden transition-all', className)}
style={{
opacity: isLoaded ? 1 : 0,
height: isLoaded ? height : 0,
transitionDuration: duration || '',
transitionDelay: delay || '',
...style
}}
{...rest}
>
{isLoaded && children}
</div>
)
}
export default SmoothRender
|
