Class TextLoop

src/components/TextLoop.tsx:36–293

};

class TextLoop extends React.PureComponent<Props, State> {
    isUnMounting = false;

    tickDelay: RequestTimeout = 0;

    tickLoop: RequestTimeout = 0;

    wordBox: HTMLDivElement | null = null;

    static defaultProps: Props = {
        interval: 3000,
        delay: 0,
        adjustingSpeed: 150,
        springConfig: { stiffness: 340, damping: 30 },
        fade: true,
        mask: false,
        noWrap: true,
    };

    constructor(props: Props) {
        super(props);
        const elements = React.Children.toArray(props.children);

        this.state = {
            elements,
            currentEl: elements[0],
            currentWordIndex: 0,
            wordCount: 0,
            currentInterval: Array.isArray(props.interval)
                ? props.interval[0]
                : props.interval,
        };
    }

    componentDidMount(): void {
        // Starts animation
        const { delay } = this.props;
        const { currentInterval, elements } = this.state;

        if (currentInterval > 0 && elements.length > 1) {
            this.tickDelay = requestTimeout(() => {
                this.tickLoop = requestTimeout(this.tick, currentInterval);
            }, delay);
        }
    }

    componentDidUpdate(prevProps: Props, prevState: State): void {
        const { interval, children, delay } = this.props as Props;
        const { currentWordIndex } = this.state;

        const currentInterval = Array.isArray(interval)
            ? interval[currentWordIndex % interval.length]
            : interval;

        if (prevState.currentInterval !== currentInterval) {
            this.clearTimeouts();

            if (currentInterval > 0 && React.Children.count(children) > 1) {