Steps to Create the React Application And Installing Module
Step 1: Create a new react app.
npx create-react-app myapp
Step 2: Go to its directory by using the below command.
cd myapp
Step 3: We have to install the typewriter-effect, by running the following command in your project directory.
npm install --save typewriter-effect
or
yarn add typewriter-effect
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}
Example: Below is a sample program to illustrate the use of the typewriter-effect :
Javascript
import React from 'react' ; //importing typewriter-effect import Typewriter from "typewriter-effect" ; import './App.css' ; function App() { return ( <div className= "App" > <Typewriter onInit={(typewriter) => { typewriter .typeString( "w3wiki" ) .pauseFor(1000) .deleteAll() .typeString( "Welcomes You" ) .start(); }} /> </div> ); } export default App; |
CSS
.App { font-family : sans-serif ; font-weight : 800 ; font-size : 40px ; text-align : center ; display : flex; justify- content : center ; align-items: center ; min-height : 100 vh; background : green ; } |
Output:
How to create typewriter effect in ReactJS ?
Learn how to enhance your React JS applications with a captivating typewriter effect using CSS and JavaScript, leveraging the typewriter-effect package for seamless and engaging UI design.
Contact Us