cft

Typing effect in React with typed.js and hooks

Achieving typing effect on your website is so easy with typed.js


user

Mohammed Nadeem Shareef

2 years ago | 2 min read

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
Linkedin

Upvote


user
Created by

Mohammed Nadeem Shareef

Hello. I am a FrontEnd Developer I work with reactJS, nextJS, TypeScript, firebase, tailwindcss, SCSS.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles