| 1 | // taken from https://github.com/WinterCore/react-text-transition/blob/master/src/components/TextTransition.tsx |
| 2 | import React, { useState |
| 3 | import type { CSSProperties, |
| 4 | |
| 5 | import { |
| 6 | useSpring, |
| 7 | useTransition, |
| 8 | animated, |
| 9 | config, |
| 10 | SpringConfig, |
| 11 | } from "react-spring"; |
| 12 | |
| 13 | export interface TextTransitionProps |
| 14 | className?: string |
| 15 | delay?: number |
| 16 | direction?: "up |
| 17 | inline?: boolean |
| 18 | springConfig?: SpringConfig |
| 19 | style?: CSSProperties |
| 20 | translateValue?: string |
| 21 | } |
| 22 | |
| 23 | function TextTransition(props: |
| 24 | const { |
| 25 | direction = "up" |
| 26 | inline = false, |
| 27 | springConfig = config. |
| 28 | delay = 0, |
| 29 | className, |
| 30 | style, |
| 31 | translateValue: tv = |
| 32 | children, |
| 33 | } = props; |
| 34 | |
| 35 | const initialRun = |
| 36 | const fromTransform = |
| 37 | const leaveTransform = |
| 38 | |
| 39 | const transitions = |
| 40 | enter: { opacity: 1 |
| 41 | from: { opacity: 0 |
| 42 | leave: { |
| 43 | opacity: 0, |
| 44 | transform: `translateY(${leaveTransform |
| 45 | position: "absolute", |
| 46 | }, |
| 47 | config: springConfig, |
| 48 | immediate: initialRun.current |
| 49 | delay: !initialRun.current |
| 50 | }); |
| 51 | |
| 52 | const [width, |
| 53 | const currentRef = |
| 54 | const heightRef = |
| 55 | |
| 56 | useEffect(() => |
| 57 | initialRun.current = |
| 58 | const element = |
| 59 | |
| 60 | // If element doesn't exist, then do nothing |
| 61 | if (!element) |
| 62 | |
| 63 | const { width, |
| 64 | |
| 65 | setWidth(width); |
| 66 | heightRef.current = |
| 67 | }, [children, |
| 68 | |
| 69 | const widthTransition = |
| 70 | to: { width |
| 71 | config: springConfig, |
| 72 | immediate: initialRun.current |
| 73 | delay: !initialRun.current |
| 74 | }); |
| 75 | |
| 76 | return ( |
| 77 | <animated.div |
| 78 | className={`text-transition ${className |
| 79 | style={{ |
| 80 | ...(inline && |
| 81 | ...style, |
| 82 | whiteSpace: inline ? |
| 83 | display: inline ? |
| 84 | height: heightRef.current |
| 85 | }} |
| 86 | > |
| 87 | {transitions((styles, |
| 88 | <animated.div |
| 89 | style={{ ... |
| 90 | ref={item === |
| 91 | > |
| 92 | {item} |
| 93 | </animated.div> |
| 94 | ))} |
| 95 | </animated.div> |
| 96 | ); |
| 97 | } |
| 98 | |
| 99 | export default TextTransition; |