Hello Developers 🤩🤩🤩
Let's admit it typing effect looks cool and the good news is we can achieve it without any pain 😜.
Let's install it first.
npm install typed.js
or
yarn add typed.js
or
bower install typed.js
Setup typed.js
- Let's dive into the code.
import Typed from "typed.js";
import { useEffect, useRef } from "react";
export default function App() {
// Create Ref element.
const el = useRef(null);
useEffect(() => {
const typed = new Typed(el.current, {
strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
// Speed settings, try diffrent values untill you get good results
startDelay: 300,
typeSpeed: 100,
backSpeed: 100,
backDelay: 100
});
// Destropying
return () => {
typed.destroy();
};
}, []);
return (
<div>
<h1>Hello Developers</h1>
{/* Element to display typing strings */}
<span ref={el}></span>
</div>
);
}
- Kaboom🔥🔥🔥 with just some lines of codes we achieve a lot thanks to typed.js
Let's explore typed.js
- Custom cursor.
- Loop.
- Smart backspace
...
useEffect(() => {
const typed = new Typed(el.current, {
strings: ["Handy", "Mandy", "Candy", "More Strings"], // Strings to display
// Speed settings, try diffrent values untill you get good results
startDelay: 300,
typeSpeed: 100,
backSpeed: 100,
backDelay: 100,
smartBackspace: true,
loop: true,
showCursor: true,
cursorChar: "!"
});
// Destropying
return () => {
typed.destroy();
};
}, []);
...
- For TypeScript lovers it provide types by default.
Closing here 👋👋👋.
Typed.js examples
Typed.js docs
HappyLearing.
HappyCoding.
This is Shareef.
Live demo
GitHub repo of this blog
My GitHub
My Portfolio
Twitter ShareefBhai99
Top comments (5)
How do we use this in typescript?
Just give the type to the
elI am having a white line before the animation, how to remove that?
Thanks.
Can we get different font color for different iterations?