react-typist
react-typist copied to clipboard
Warning: Please update the following components: Cursor
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>
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 ? (
<Typist
avgTypingDelay={50} onTypingDone={() => setCount(29)}
cursor={{ hideWhenDone: true }}
> I grew up and live in OKC OK! <Typist.Backspace count={28} delay={800} /> {" "} Develop Websites with React and {" "} ❤️ </Typist> ) : ( "" )}
);
}
> I grew up and live in OKC OK! <Typist.Backspace count={28} delay={800} /> {" "} Develop Websites with React and {" "} ❤️ </Typist> ) : ( "" )}
export default BioTypist `
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:
- Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work.