animation FadeInWrapper.tsx

80% Statements 4/5

33.33% Branches 1/3

50% Functions 1/2

80% Lines 4/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  
 
 
 
9x
 
 
 
 
 
 
 
 
 
 
345x
 
345x
 
 
 
 
 
 
345x
 
 
 
 
 
 
 
  import { Box, BoxProps } from "@mui/material";
import React, { memo } from "react";
import { animated, useInView, useSpring } from "react-spring";
 
const FadeInWrapper = ({
  children,
  delay = 1000,
  containerProps,
  dataTestId
}: {
  children: React.ReactNode;
  delay?: number;
  containerProps?: BoxProps;
  dataTestId?: string;
}) => {
  const [ref, inView] = useInView({ once: true });
 
  const styles = useSpring({
    opacity: inView ? 1 : 0,
    from: { opacity: 0 },
    config: { duration: 500, easing: (t: any) => t * (2 - t) },
    delay,
  });
 
  return (
    <Box ref={ref} data-testid={dataTestId} {...containerProps}>
      <animated.div style={styles}>{children}</animated.div>
    </Box>
  );
};
 
export default memo(FadeInWrapper);