react-typing-animation

react-typing-animation copied to clipboard

Description I have tried to add emoji to labels that I want to type via Typing and they are rendered in a weird way. Here is my component init:

<Typing loop={true}>
  <span>Test 1 🛠</span>
  <Typing.Delay ms={1000} />
  <span>Test 2 🛒🐹🧔</span>
</Typing>

Expected Result Emoji is rendered right away without showing unknown char symbol like letters.

Actual Result Emoji is rendered in a way when the unknown char symbol is shown firstly and then the actual emoji is rendered. This is a frustrating experience:

Is it possible to fix somehow?

I had this issue too and solved it by applying a class/style with a font-family to the span element containing the emoji (or just the emoji itself if you want the rest of the text to be in a particular font):

<Typing loop={true}>
  <span class="typing-emoji">Test 1 🛠</span>
  <Typing.Delay ms={1000} />
  <span class="typing-emoji">Test 2 🛒🐹🧔</span>
</Typing>

.typing-emoji {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

@acsands13 that's neat! Thank you 🙌