How to get TypeWriter Effect In ReactJS

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.

How to get TypeWriter Effect In ReactJS

Comments

More from this blog

Use the power of AI to write documentations

AWS Unleashed: Your Instant Setup Guide! 🚀

How to set AWS S3 for React native

How to make API requests with Redux Thunk in ReactJs.

Dev Retro 2022: becoming a Software Developer.

Command Palette

Comments

More from this blog