Table of contents
No headings in the article.
Hey everyone. Hope you all are well. Recently when I was working on my portfolio site which you can checkout at rayanabid.com, I wanted to get a typewriter effect that I saw on most sites. So I thought I might as well share it as I found this method very easy and useful to implement.
Also on a side note, If you speak urdu/hindi then you can wacth this instead if you prefer video format youtube.
So this is the effect we will try to achieve in this article.
So to get this effect. You only need to be sure of two things.
- You need to have a react project setup.
- You need to install this package
Open this link and paste this command in your terminal
npm i typewriter-effect
After that this package will be installed on your react project.
Now we just have to import this component in our JSX file. like this
import Typewriter from 'typewriter-effect';
Once you have imported it you can use it in your return statement.
<Typewriter
options={{
strings: ['Hello', 'World'],
autoStart: true,
loop: true,
}}
/>
You can replace the strings array with any text you want.
and viola your typewriter effect is ready.
Now you can add this to your projects as well.
Please do share your thoughts as well. and checkout the repo on github
Bye for now.