React 18 support

[NawarA]

Hey guys, seems the library acts crazy in React 18, spewing non-sense:

React 18.0.0:

React 17.0.2:

I saw in another issue someone mentioned animations may screw up in React 18, but I'm flagging the whole library doesnt work in React 18. How easy is this to patch?

[NawarA]

Looks like each character at index-i is being written more than once

[utxo-detective]

Seeing the same on react 18.0.0-alpha-cae635054-20210626

[dellwatson]

it seems work in me

[SavarJ]

Hi @NawarA. Did you find any way to fix it?

[jlubeck]

Was anyone able to make this work?

[NawarA]

No, I didnt fix it. I was forced to use a different library

[jlubeck]

No, I didnt fix it. I was forced to use a different library

Can you share which one did you use for React 18?

Thanks!

[NawarA]

No, I didnt fix it. I was forced to use a different library

Can you share which one did you use for React 18?

Thanks!

https://www.npmjs.com/package/react-typewriter

[jason89521]

I really like the way react-typist creates the typing animation, but it seems that this package is no longer updated. As a result, I create a new package and try to reproduce the functionality of react-typist. If you haven't find an alternative package, maybe you can give it a try.

Here is the package: https://www.npmjs.com/package/react-typist-component

[echo-gravitas]

I really like the way react-typist creates the typing animation, but it seems that this package is no longer updated. As a result, I create a new package and try to reproduce the functionality of react-typist. If you haven't find an alternative package, maybe you can give it a try.

Here is the package: https://www.npmjs.com/package/react-typist-component

Works like a breeze with React 18 and MUI, thank you!

[Vinnie-tec]

Amazing

[Beckem]

Remove StrictMode works fine for me

[zapling]

Remove StrictMode works fine for me

Yup, strangely this solved the issue for me as well :thinking:

[zapling]

I get this warning message when running without strict mode

componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Cursor

[Doyu-Lee]

Still encountering the same error, and after trying several libraries, I'm now using react-simple-typewriter ("^5.0.1") and can achieve the same animation where certain sentences appear and then disappear. You can refer to the code below. Hope this can be of assistance with your issues too.

// 'react-typist' code
import Typist from 'react-typist';
import 'react-typist/dist/Typist.css';
.
.

const SomeComponent = () => {
.
.
return (
    <div>
     I am
      <div >
        <Typist className="inline" startDelay={1000}>
          sleepy
          <Typist.Backspace count={7} delay={1000} />
          hungry
          <Typist.Backspace count={7} delay={1000} />
          happy
        </Typist>
      </div>
    </div>
);
}

export default SomeComponent;

// 'react-simple-typewriter' code
import { useTypewriter, Cursor } from "react-simple-typewriter";
.
.

  const [text] = useTypewriter({
    words: ['sleepy', 'hungry', 'happy'],
  })


   <div>
     I am
      <div>
        {text}                  
        <Cursor cursorColor='red' />
      </div>
    </div>