ratson / react-typist-loop

Typing animations with React.

react-typist-loop

Typing animations with React.

Installation

npm install react-typist-loop --save

Usage

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

const App = () => (
  <TypistLoop interval={3000}>
    {[
      'Hello World',
      'Good Morning',
      'Bye',
    ].map(text => <Typist key={text} startDelay={1000}>{text}</Typist>)}
  </TypistLoop>
)

react-typist-loop's Issues

Memory Leak

I am receiving the following memory leak warning after unmounting a parent container that uses TypistLoop with Typist and Typist.Backspace. Is there a proper way to use TypistLoop to avoid this issue?

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Backspace animation

Is there a way the backspace animation could be added, so that on word replacement it doesn't remove the entire word at once instead show some backspace animation?

Lighthouse score

Hello, love the plugin.
Using lighthouse to monitor the performance of my homepage I noticed that the visually complete time is impacted a lot by the react-typist plugin animation.

While I know this has nothing to do with your plugin, I believe this issue could be solved here, making the first "loop" not animatable, so it renders nicely for the browser, this could have seo implication because it changes the speedindex fo your website.

The same feature wouldn't have much sense in the actual react-typist plugin because it does not have multiple elements animated.

Just an idea i thought I would share.
Great work anyway.