Typing effect in React with typed.js and hooks
Achieving typing effect on your website is so easy with typed.js
Mohammed Nadeem Shareef
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 provides 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
Upvote
Mohammed Nadeem Shareef
Hello. I am a FrontEnd Developer I work with reactJS, nextJS, TypeScript, firebase, tailwindcss, SCSS.
Related Articles