react-simple-typewriter: Loop does not work

user_9621262 0
Viewed 407

I DID NOT GET THE DESIRED OUTPUT when I used react-simple-typewriter codes from this Link to my code. It works for only the first word of the word list. But I want that it will continuously run. When I reload it will show the next word from the list. I used to change the only "loop", "loop={0}". But nothing does not work for me. Here is the code sample:

   const HeaderHero = () => {
      return (
        <>
          <section className="hero" id="home">
            <div className="container f_flex top">
              <div className="left top">
                <h3>Welcome to my world...</h3>
                <h1>
                  Hi, I'm <span>Samrat Alam</span>
                </h1>
                <h2>
                  a
                  <span>
                    <Typewriter
                      words={[
                        " Developer.",
                        " Learner.",
                        " Coder.",
                        " Self Believer.",
                      ]}
                      loop={0}
                      cursor
                      cursorStyle="|"
                      typeSpeed={70}
                      deleteSpeed={50}
                      delaySpeed={1000}
                    />
                  </span>
                </h2>
    
                <div className="hero_btn d_flex">
                  <div className="col_1">
                    <h4>Find With ME</h4>
                    <button className="btn_shadow">
                      <i className="fab fa-facebook"></i>
                    </button>
                    <button className="btn_shadow">
                      <i className="fab fa-linkedin-in"></i>
                    </button>
                    <button className="btn_shadow">
                      <i className="fab fa-instagram"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </>
      );
    };
    
    export default HeaderHero;

Here is the output result:

enter image description here

reactjs loops
3 Answers

Use hooks instead of components. In your case

//main file

 import { useTypewriter } from 'react-simple-typewriter';
 import 'react-simple-typewriter/dist/index'

 const HeaderHero = () => {
 const {text} = useTypewriter({
 words: [ " Developer."," Learner."," Coder."," Self 
 Believer.",],
 loop: 0, 
 typeSpeed: 70,
 deleteSpeed: 50,
 delaySpeed: 1000
 })
  return (
    <>
      <section className="hero" id="home">
        <div className="container f_flex top">
          <div className="left top">
            <h3>Welcome to my world...</h3>
            <h1>
              Hi, I'm <span>Samrat Alam</span>
            </h1>
            <h2>
              a
              <span>
                {text}
                <span className="cursor">|</span>
              </span>
            </h2>

you wont get cursor and cursor type when using hooks. But using CSS, this cursor can be designed.

 //for using the cursor, need this in the CSS file.   

 .cursor {
        animation: blink 1s linear infinite forwards;
    }
user_192564720

I ended up using the package react-ts-typewriter import Typewriter from 'react-ts-typewriter'; and invoking it with:

<h1>
<Typewriter loop={true} text="Hello"} />
</h1>
user_143347060

As written on the README of react-simple-typewriter to add the cursor using the hook you can import it as a component and place it right after

import React from 'react'
import { useTypewriter, Cursor} from 'react-simple-typewriter'

const MyComponent = () => {

  const {text} = useTypewriter({
    words: ['Hello', 'From', 'Typewriter', 'Hook!'],
    loop: {3},
    onLoopDone: () => console.log(`loop completed after 3 runs.`),
  })

  return (
    <div className='App'>
      <span>{text}</span>
      <Cursor />
    </div>
  )
}
user_192308690
Related