Instant sequence data issue

[Canis-Infinity]

I'm using this library in the Next.js project. I store data in an object which has different languages.

I have a language switcher in this project, but when I switch the language, the sequence won't change into the correct string array.

const typingAnimationObj = {
  tw: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
  cn: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
  en: ['XXX', nextTextDelay, 'XXX', nextTextDelay],
};

<TypeAnimation
  sequence={typingAnimationObj[lang]}
  ...
/>

Is this a bug or just my problem? Can someone help me?

[Canis-Infinity]

I used the most primitive way to solve this problem, but I think it's the worst way, even if the code executes it correctly.

{lang === 'en' && (
  <TypeAnimation
    sequence={typingAnimationObj.en}
    wrapper="span"
    speed={10}
    cursor={false}
    repeat={Infinity}
  />
)}

[maxeth]

Hey @Canis-Infinity,

as this package used to be (or still is?) just an extended wrapper of 'typical' for React.js, the typing animation directly modifies the DOM elements, independently of React.

That's why the component is permanently memoized as stated in the docs. (Background: Dynamically updating the sequence would corrupt the animation process.)

Solution

Instead, you need to unmount the current component and mount a new one with the different sequence.

Check out this solution. Basically it creates a wrapper component the re-mounts whenever the sequence changes.