Inline styling for text

[nsdub]

Is there a way to style a segment of text within a Typewriter tag? For example, let's say we want to change the color of a word within a string that's being 'typed' out.

Typically this would be handled by nesting Text tags, but it seems like the Typewriter tag doesn't want to be nested.

This is the nearest I've gotten to the desired behavior, but the code looks obviously wrong. The resultant behavior here is that 'Normal text' types out, and 'Funky text' is rendered outright:

<TypeWriter typing={1}>
    <TypeWriter typing={1}>
         Normal text
    </TypeWriter>
    <TypeWriter typing={1} style={{color: 'blue'}}>
         Funky text
    </TypeWriter>
</TypeWriter>

The above snippet also throws the following warning:

Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `TypeWriter`, expected `string`.

Any ideas on how to accomplish this?

[TaylorBriggs]

Thanks for writing up this issue. It should support nesting <Text /> within the component. I'll have to look into why that isn't working. In the meantime, feel free to poke around the code and open a PR if you find a fix!

[TaylorBriggs]

There's currently no special handling for nested Text elements, that's the problem. The TypeWriter component expects children to be a string. I'll need to add an enhancement to handle nested Text correctly.

[nsdub]

Thanks for the follow up, Taylor!

[TaylorBriggs]

@nsdub I have a fix in progress, should get to complete it and publish a new version sometime this week.

[nsdub]

@TaylorBriggs Awesome, thanks for taking the time!

[TaylorBriggs]

@nsdub v0.6.0 is published to add support for nested <Text> elements.

[nsdub]

Thanks for the update here @TaylorBriggs!

I've been playing around with the updated package and I'm noticing that a limitation seems to be that the nested Text tag will work at the conclusion of the string, but not in the middle of a string.

Illustration using the automated test from the last release. This works as expected:

<TypeWriter typing={1} style={{fontSize: 40}}>
  Hello
  {' '}
  <Text style={{ color: 'red' }}>World!</Text>
</TypeWriter>

This does not:

<TypeWriter typing={1} style={{fontSize: 40}}>
  Hello
  {' '}
  <Text style={{ color: 'red' }}>World!</Text>
  This is TypeWriter.
</TypeWriter>

Nor does any combination of throwing 'Hello' or 'This is TypeWriter' into Text tags. From my testing, only the content up to and including the first nested Text tag gets rendered.

[TaylorBriggs]

Thanks for writing this up @nsdub. I'm looking into it and will publish a fix once I figure it out.