Have initial text ready

[kevinlu1248]

Hello,

Awesome package btw. I was wondering if there's a way of having initial text there, instead of initially having nothing and typing it out the first time.

[maxeth]

Hi, since the default wrapper for the animation is a <span>, you could just do something like this:

<span style={{ fontSize: '2em' }}>
      <span>We produce food for</span>{' '} // <--- will be pre-typed
      <TypeAnimation
        sequence={[
          'Mice',
          1000,
          'Hamsters',
          1000,
          'Guinea Pigs',
          1000,
          'Chinchillas',
          1000,
        ]}
        repeat={Infinity}
      />
</span>

But in that case, you couldn't animate that pre-typed string later in the animation sequence.

[kevinlu1248]

Oh I meant like it is "We produce food for Mice" initially and "Mice" gets replaced by "Hamsters", etc.

[maxeth]

I see, so something like

    <TypeAnimation
       preRenderFirstString={true}
        sequence={[
          'A'
          1000,
          'B',
          1000,
          'C',
          1000
        ]}
        repeat={Infinity}
      />

Results in: 'A' (pre-rendered), 1s delay, 'B', 1s delay, 'C', 1s delay, 'A', ...

Sounds like a good feature, especially for SEO if you use server-side rendering. It's not possible yet but I'll add it in the following days.

[asp3]

hey! checking in on the preRenderedFirstString prop @maxeth

[maxeth]

hey! checking in on the preRenderedFirstString prop @maxeth

Added in version 3.1.0 https://react-type-animation.netlify.app/examples#initially-pre-rendered