Thread by @tejinder_id

⚡️Day 83 ⚡️

Today -

- Continued my study with React JS.

- Made a hero section of my portfolio website.

- Studied how to use the typewriter effect in our project.

Let us discuss how to install the npm package of the typewriter effect in react.

A thread 🧵

#100DaysOfCode.

{1/6}

First, we will install the react-typing-effect npm package using the npm command.

How to install it?

Step 1:-

- First, change PWD(present working directory) to my-app or my-project folder in your VSCode editor.

- command is - cd my-app or cd my-project.

{2/6}

Step 2:- Go to google and search "react-typing-effect npm package."

- Copy the npm command i.e `npm install --save react-typing-effect`.

- Paste this command in our VS code editor terminal.

- Now it is installed.

{3/6}

How to use it?

- Go to your file where you are working on the hero section.

- use Import statements of this package so that you can use the typing component in React.

use - import ReactTypingEffect from 'react-typing-effect' at the top of your working file.

{4/6}

- Now its component is available in our file. the component is:-

<ReactTypingEffect />

- Now we can design this component in CSS and also change the speed of typing using props that are mentioned from where we have copied the npm link.

{5/6}

For Eg:-

<ReactTypingEffect className="pl-2 text-[#5e5ce6]"

text={["Business.", "Startups."]} eraseDelay={500} typingDelay={500}

/>

--> className="pl-2 text-[#5e5ce6]" - this is CSS

pl-2 means padding left.
text-[#5e5ce6] - color of text.

{6/6}

--> text={["Business.", "Startups."]} eraseDelay={500} typingDelay={500}

- text is a prop having an array of text that we want to show.

- eraseDelay and typingDelay are also props defining time function in milliseconds of erasing and typing respectively.

If you like this make sure to:

Follow me @tejinder_id for web development-related tweets.

Thank you so much for staying to the end of this thread.