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.