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 43 44 45 | 306x 9862x 9862x 9862x | import { Box, BoxProps, SxProps } from "@mui/material";
import React, { CSSProperties, memo } from "react";
import { animated, useInView, useSpring } from "react-spring";
type FadeUpProps = {
children: React.ReactNode;
delay?: number;
containerProps?: any;
reset?: boolean;
width?: string | number;
customStyle?: CSSProperties;
x?: number;
};
const FadeUpWrapper = ({
children,
delay = 1000,
containerProps,
reset = false,
width = "100%",
customStyle,
x = 10,
}: FadeUpProps) => {
const [ref, inView] = useInView({ once: true });
const styles = useSpring({
width: "100%",
opacity: inView ? 1 : 0,
y: inView ? 0 : 50,
x: inView ? 0 : x,
from: { opacity: 0, y: 50 },
config: { duration: 500, easing: (t: any) => t * (2 - t) },
delay: Math.min(delay, 1000),
reset,
...customStyle,
});
return (
<Box width={width} ref={ref} {...containerProps}>
<animated.div style={styles}>{children}</animated.div>
</Box>
);
};
export default memo(FadeUpWrapper);
|