Looping not working

[danielbgjv]

Hi, I´m using the react-simple-typewriter with next.js, but the loop isn´t working. It´s types the first word, delete it, but not type the other words.

[Walidoux]

Can you send at least a piece of code, what versions are you using for next.js, react ?

[ddomdel]

this is happening to me as well, even if the loop is set to false or 0

Framework Versions "next": "12.0.9" "react": "17.0.2"

And here is the code

<Typewriter
              loop={false}
              cursor
              cursorStyle="_"
              typeSpeed={90}
              deleteSpeed={7}
              delaySpeed={1500}
              words={['Currently building a web app for a local food business 🍧']}
 />

[vedant-shah]

+1 same issue, it takes very long to go to the next word

[Boye-dev]

I have this same issue the words is only displaying the first word React 18

[HectorLobatoSilva]

Solved using useTypewriter hook, here let the code

import type { NextPage } from "next";
import { useTypewriter, Cursor } from "react-simple-typewriter";

const Home: NextPage = () => {
    const words = ["Software developer", "Full-Stack developer", "Creative", "Web designer"];
    const { text } = useTypewriter({
        words,
        loop: 0, // Infinit
    });
    return (
        <div className="container mx-auto">
            <div>
                <h1>Hector Lobato</h1>
                <p className="text-[#6FFFE9]">
                    <span>{text}</span>
                    <Cursor />
                </p>
            </div>
            <button>Download Resume</button>
        </div>
    );
};

export default Home;

[AbdelrahmanReda]

Use the hook option and if you want to use the cursor effect you will need o to import it

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>
  )
}

[indrakhatiwada]

nexpected token (9:15)

7 | const text = useTypewriter({ 8 | words: ['Hello', 'From', 'Typewriter', 'Hook!'],

9 | loop:{3}, | ^ 10 | })

[irsyadadl]

Hi @danielbgjv, You can do that with number like.

<Typewriter
  words={["1", "2", "3", "4"]}
  loop={1}
  cursor
  cursorStyle="_"
  typeSpeed={50}
  deleteSpeed={20}
  delaySpeed={1000}
/>;

[abdulkadirkg]

Solved using useTypewriter hook, here let the code

import type { NextPage } from "next";
import { useTypewriter, Cursor } from "react-simple-typewriter";

const Home: NextPage = () => {
    const words = ["Software developer", "Full-Stack developer", "Creative", "Web designer"];
    const { text } = useTypewriter({
        words,
        loop: 0, // Infinit
    });
    return (
        <div className="container mx-auto">
            <div>
                <h1>Hector Lobato</h1>
                <p className="text-[#6FFFE9]">
                    <span>{text}</span>
                    <Cursor />
                </p>
            </div>
            <button>Download Resume</button>
        </div>
    );
};

export default Home;

This code re-renders the component every letter change.