div element inside heading (h1, h2..) / paragraph elements

[haseebanwar]

By default <Typist /> component produces a div element with class Typist. If I want to animate a heading I need to put <Typist /> component inside h1 tag just like this:

<h1>
  <Typist>Animate this text.</Typist>
</h1>

This will result in the following markup:

<h1>
  <div class="Typist">
     Animate this text.
     <span class="Cursor Cursor--blinking">|</span>
  </div>
</h1>

Now the above syntax has no issues everything works as it is supposed to but is it a good practice to put a div tag inside a heading tag?

To solve the above issue I tried to animate my heading in this way:

<Typist>
  <h1>Animate this text.</h1>
</Typist>

But this way does not animate the heading correctly and pushes the cursor to the next line instead of showing at the end of the text. The markup will be:

<div class="Typist ">
  <h1>Animate this text.</h1>
  <span class="Cursor Cursor--blinking">|</span>
</div>

Is there any way to keep the functionality and animations without having to put the div inside heading or paragraph tags?

Can we give a porp to <Typist /> component to produce a span element instead of div so h1 does not have a div inside of it.

[LCSLITX]

This also occurs with the following example given by documentation which uses a div inside of Typist. The same happens with p element. I suppose the cause of this problem is related to CSS display properties as h1, p and div have block as default value.

<Typist>
  <span className="my-custom-class"> First Sentence </span>
  <br />
  <div className="container">
    <p> This will be animated after first sentence is complete </p>
    <MyComponent prop1="val1"> More text. </MyComponent>
  </div>
  Final sentence
</Typist>

One thing that I used to temporarily solve this is setting display property of the used element to inline-block.