react-typist icon indicating copy to clipboard operation
react-typist copied to clipboard

Warning: Please update the following components: Cursor

Open BenElferink opened this issue 5 years ago • 2 comments

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>

BenElferink avatar Dec 06 '20 11:12 BenElferink

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> ) : ( "" )}
); }

export default BioTypist `

donaldboulton avatar Dec 17 '20 16:12 donaldboulton

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.

ezcg avatar Dec 26 '21 12:12 ezcg