Reactjs rerender components in a loop

Question

I am building a Nextjs site and am using the react-typist library

I want the text that I write with the typist library to run on an infinite loop. Here is what my component looks like at the moment.

import Typist from 'react-typist'

const Typer = () => {
  return (
    <Typist
      className="flex justify-center mt-10 text-2xl h-10"
      cursor={{
        show: false
      }}
    >
      <Typist.Delay ms={1000} />
      <div>Some text</div>
      <Typist.Backspace count={20} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Some more text</div>
      <Typist.Backspace count={13} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Even More Text</div>
      <Typist.Backspace count={18} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Last bit of text</div>
    </Typist>
  )
}

export default Typer

and here is my main index.js file where I am importing the component.

import Head from '../components/head'
import Nav from '../components/nav'
import Typer from '../components/Typer'

import '../styles/main.css'

const Index = () => {
  return (
    <div>
      <Head title="Learn Nextjs" />
      <Nav />
      <Typer />
    </div>
  )
}

export default Index

I tried wrapping it in a for loop but that didn't seem to work. Should I remount the component over and over again, if so how should I go about doing that? Let me know if you need any other info from me to help figure this out. Thanks in advance.

"I want the text that I write with the typist library to run on an infinite loop. " If you write an infinite loop in your component then your app will hang. What behavior do you want to happen? Word it like "when the user ... then the app will ...". Fill in the `...`. — Code-Apprentice, Dec 18 '19 at 16:58
Yea maybe infinite loop isn’t the right term, but I want it to repeat continously. — Leo Policastro, Dec 18 '19 at 18:18

score 2 · Answer 1 · answered Dec 18 '19 at 16:54

I checked out their document and found this onTypingDone

    <Typist
      className="flex justify-center mt-10 text-2xl h-10"
      cursor={{
        show: false
      }}
      onTypingDone={reRenderYourComponent}
    >

You may use some callback function inside of it like re-rendering components using this way

this.forceUpdate();

score 1 · Answer 2 · answered Dec 19 '19 at 23:19

I suggest another solution is to leverage key props

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import Typist from 'react-typist'

function App() {
  const [now, setNow] = useState(new Date());
  const onTypingDone = () => setNow(new Date());
  return (
    <Typist
      className="flex justify-center mt-10 text-2xl h-10"
      cursor={{
        show: false
      }}
      onTypingDone={onTypingDone}
      key={now}
    >
      <Typist.Delay ms={1000} />
      <div>Some text</div>
      <Typist.Backspace count={20} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Some more text</div>
      <Typist.Backspace count={13} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Even More Text</div>
      <Typist.Backspace count={18} delay={200} />
      <Typist.Delay ms={1000} />
      <div>Last bit of text</div>
    </Typist>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

score 0 · Answer 3 · answered Dec 31 '19 at 19:23

So I ended up accomplishing the desired effect by setting a typingDone state to false initially and onTypingDone I passed a method that changes typing done to true and back to false. Then I used a ternary to render the text animations whenever the typingDone state is false. There is definitely a more efficient way to accomplish this but it got the job done.

import React from 'react'
import Typist from 'react-typist'

class Typer extends React.Component {
  state = {
    typingDone: false
  }
  handleTypingDone = () => {
    this.setState({
      typingDone: true
    })
    this.setState({
      typingDone: false
    })
  }

  render() {
    const { typingDone } = this.state

    return !typingDone ? (
      <Typist
        onTypingDone={this.handleTypingDone}
        className="flex justify-center mt-10 text-2xl h-10"
        cursor={{
          show: false
        }}
      >
        <Typist.Delay ms={1000} />
        <div>Full Stack Developer</div>
        <Typist.Backspace count={20} delay={200} />
        <Typist.Delay ms={1000} />
        <div>Web Developer</div>
        <Typist.Backspace count={13} delay={200} />
        <Typist.Delay ms={1000} />
        <div>Software Developer</div>
        <Typist.Backspace count={18} delay={200} />
        <Typist.Delay ms={1000} />
        <div className="animated pulse infinite">Node.js Developer</div>
        <Typist.Delay ms={3000} />
        <Typist.Backspace count={17} delay={200} />
      </Typist>
    ) : (
      <div></div>
    )
  }
}

export default Typer

Reactjs rerender components in a loop

3 Answers3