animation FadeDownWrapper.tsx

20% Statements 1/5

0% Branches 0/10

0% Functions 0/2

20% Lines 1/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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
42  
 
 
 
13x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Box } from "@mui/material";
import React, { memo } from "react";
import { animated, useInView, useSpring } from "react-spring";
 
const FadeDownWrapper = ({
  children,
  delay = 1000,
  fromShadow,
  toShadow,
  borderRadius,
}: {
  children: React.ReactNode;
  delay?: number;
  fromShadow?: string;
  toShadow?: string;
  borderRadius?: string;
}) => {
  const [ref, inView] = useInView({ once: true });
 
  const styles = useSpring({
    width: "100%",
    opacity: inView ? 1 : 0,
    y: inView ? 0 : -50,
    ...(toShadow &&
      fromShadow && {
        boxShadow: inView ? toShadow : fromShadow,
      }),
    borderRadius,
    from: { opacity: 0, y: -50, boxShadow: fromShadow },
    config: { duration: 500, easing: (t: any) => t * (2 - t) },
    delay,
  });
 
  return (
    <Box ref={ref}>
      <animated.div style={styles}>{children}</animated.div>
    </Box>
  );
};
 
export default memo(FadeDownWrapper);