Typewriter library | How to add < & > in typeString()?

Question

I want to escape < and > characters within the typeString() method in Typewriter.

I've tried using the escape characters, but it does not seem to work.

This is the code I'm writing.

<Typewriter
      onInit={(typewriter) => {
        typewriter
          .typeString("<div>import Aadesh from 'org'</div>")
          .pauseFor(1500)
          .typeString("<div>const App() =&#62; &#60; Aadesh /&#62; </div>")
          .start();
      }}
    />

It does not convert < to < and > to >. I've also tried using < & > but it hasn't worked.

Expected output from typewriter:

import Aadesh from 'Org' 
const App() => <Aadesh />

Actual output form typewriter

import Aadesh from 'Org' 

const App() => `<` Aadesh /`>`

Answer 1

When you pass a string with html tags to the typeString(), the library treats the entire string as a single entity and does not parse or render the tags. This is why < and > are not being converted to < and >. If that so, use js built-in string methods to replace the entities with the actual characters before passing the string to the typeString().

Example;

<Typewriter
 onInit={(typewriter) => {
   typewriter
     .typeString("<div>import Aadesh from 'org'</div>")
     .pauseFor(1500)
     .typeString("<div>const App() =&#62; &#60; Aadesh /&#62; </div>".replace(/&#60;/g, '<').replace(/&#62;/g, '>'))
     .start();
 }}
/>