search

maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
427 stars 24 forks source link

Line Breaks #18

Closed Filimoa closed 1 year ago

Filimoa commented 1 year ago

Thanks for you work on this. I'm not sure if this is a duplicate of #12 but is there any way of adding line breaks? I'm working on rendering a paragraph and using <br/> or \n does not work. Thanks.

Toriqul-Leon commented 1 year ago

Same issue! Did you find the solution?

maxeth commented 1 year ago

I think you could get it working with the white-space css prop:

<TypeAnimation
            style={{ whiteSpace: 'pre-line' }} 
            sequence={[
              `Line one
               Line Two\nLine Three
               Line Four\n LineFive
              `
            ]}

          />

Is this what you've been looking for?

Toriqul-Leon commented 1 year ago

I think you could get it working with the white-space css prop:

<TypeAnimation
            style={{ whiteSpace: 'pre-line' }} 
            sequence={[
              `Line one
               Line Two\nLine Three
               Line Four\n LineFive
              `
            ]}

          />

Save Is this what you've been looking for?

This works for me! Thanks a lot mate. ❤️