All strings are being typed before deleting them in typed js

267 views Asked by At

I'm trying to use typedjs in react to emulate the typing effect. I have 3 strings in the string array and as far as i know, after each string is typed, it should get deleted and the next string should be typed. But i'm unable to do so.

Is my understanding correct or do i have to implement additional internal functions like onStringTyped given in the documentation?

Here is my code for the TypeIt react component.

      <TypeIt
        options={{
          strings: ["string0", "string1", "string2"],
          waitUntilVisible: true,
          loop: true,
          lifeLike: true,
          cursorChar: "_",
          smartBackspace: true,
        }}
      ></TypeIt>
1

There are 1 answers

0
Faheim Arslan On

I found a way to fix this issue, and it turns out that the strings are typed one after another (stacked) and deleted at once.

      <TypeIt
        getBeforeInit={(instance) => {
          instance
            .type("String0.")
            .pause(750)
            .delete(8)
            .pause(500)
            .type("String1.")
            .pause(750)
            .delete(8)
            .pause(500)
            .type("String2.")
            .pause(750)
            .delete(8);

            return instance;
        }} 
        options={{
          waitUntilVisible: true,
          loop: true,
          element: "h1",
          lifeLike: true,
          cursorChar: "_",
          smartBackspace: true,
        }}
      ></TypeIt>