Function TextTransition

src/components/TextTransition.tsx:6–71

(props)

import {useSpring, useTransition, animated, config, SpringConfig} from "react-spring";

const TextTransition: React.FC<TextTransitionProps> = (props) => {
    const {
        direction = "up",
        inline = false,
        springConfig = config.default,
		delay = 0,
        className,
        style,
        children,
    } = props;

    const initialRun = React.useRef(true);

	const transitions = useTransition([children], {
		from: { opacity : 0, transform : `translateY(${direction === "down" ? "-100%" : "100%"})` },
		enter: { opacity : 1, transform : "translateY(0%)" },
		leave: { opacity : 0, transform : `translateY(${direction === "down" ? "100%" : "-100%"})`, position: "absolute" },
		config: springConfig,
        immediate: initialRun.current,
		delay: ! initialRun.current ? delay : undefined,
	});

    const [width, setWidth] = React.useState<number>(0);
    const currentRef = React.useRef<HTMLDivElement>(null);
	const heightRef = React.useRef<number | string>("auto");

    React.useEffect(() => {
        initialRun.current = false;

        const elem = currentRef.current;

        if (! elem) {
            return;
        }
        
        const { width, height } = elem.getBoundingClientRect();
        setWidth(width);
		heightRef.current = height;
    }, [children, setWidth, currentRef]);

    const widthTransition = useSpring({
		to: { width },
		config: springConfig,
        immediate: initialRun.current,
		delay: ! initialRun.current ? delay : undefined,
	});

	return (
		<animated.div
			className={`text-transition ${className}`}
			style={{
                ...(inline && ! initialRun.current ? widthTransition : undefined),
				...style,
				whiteSpace: inline ? "nowrap" : "normal",
				display: inline ? "inline-flex" : "flex",
				height: heightRef.current,
			}}
		>