jstejada / react-typist

Typing animations with React
https://jstejada.github.io/react-typist/
Other
1.4k stars 124 forks source link

Warning: Please update the following components: Cursor #96

Open BenElferink opened 3 years ago

BenElferink commented 3 years ago

React gave me a warning when using Typist:

Warning: 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

Here is the code block I'm using:

<Typist cursor={{ show: false }}>
    <h2>
        Hi, my name is Xxx Xxxxxxxx...
        <Typist.Backspace count={12} delay={200} />,
    </h2>
    <h1>
        I'm a Front End Developer!
    </h1>
</Typist>
donaldboulton commented 3 years ago

Here is my typist code for publiuslogic.com Hope it helps!

` import React, { useState, useEffect } from 'react' import Typist from 'react-typist'

function BioTypist() { const [count, setCount] = useState(1)

useEffect(() => { // document.title = You clicked ${count} times; console.log("Count: " + count); setCount(1); }, [count]);

return (

{count ? ( setCount(29)} cursor={{ hideWhenDone: true }} > I grew up and live in OKC OK! {" "} Develop Websites with React and {" "} ❤️ ) : ( "" )}

); }

export default BioTypist `

ezcg commented 2 years ago

It'd be great if this repo was updated to fix this error as typist will no longer work after React 18.x per the warning: