Change sequence and restart typing animation

[AlexString]

As it is mentioned in the Usage Notes

Immutability Due to the nature of the animation, this component is permanently memoized, which means that the component never re-renders unless you hard-reload the page, and hence props changes will not be reflected.

I'm using this nice package in a website where switching between languages is involved so I needed to change sequence on language change.

I made this workaround to achieve this and I hope this helps someone who is looking for something similar.

function useOnChangeSequence(sequence: any[]) {
    const [animationFlag, setAnimationFlag] = useState(false);

    // Put down flag when sequence changed
    useEffect(() => setAnimationFlag(false), [sequence]);

    useEffect(() => {
        if (animationFlag) return; // Avoid infinite loop
        setAnimationFlag(true); // raise flag to trigger animation
    }, [animationFlag]);

    return animationFlag;
}

And I'm using it like so:

const TypeWriterText: FC<ITypeWriterTextProps> = ({
    sequence,
    wrapper = 'p',
    onFinish,
    cursor = true,
    className = '',
}) => {
    const animationFlag = useOnChangeSequence(sequence);
    return (
        animationFlag ?
            <TypeAnimation
                cursor={cursor}
                sequence={sequence}
                speed={30}
                wrapper={wrapper}
                className={className}
            />
            : null
    );
};

[karelric]

I agree, the component is awesome but should react to sequence changes and re-render the components.

[ihorml]

@AlexString thanks for the workaround!

[htranq]

I thinks we can using the key prop for remount component, just naming value for each language code, that works for me.

             return (<TypeAnimation
                                key={lang} // lang is current language
                cursor={cursor}
                sequence={sequence}
                speed={30}
                wrapper={wrapper}
                className={className}
            />)

@maxeth may you update docs at Hot Reload not supported ? for how to remount the component, thanks you.

[izcoser]

@htranq what is the difference between this method vs the OP method? Certainly yours is cleaner but I wonder if there's any performance difference.