Skip to content
Related Articles

Related Articles

Improve Article

How to create typewriter effect in ReactJS ?

  • Difficulty Level : Easy
  • Last Updated : 25 Jan, 2021

The typewriter effect in ReactJS is a JS package that can be used for a better UI design. This effect allows us to create a simple typing animation in ReactJS. For using Typewriter in ReactJS we need to install the typewriter-effect package.

Prerequisites:

  • Basics of ReactJS
  • Already created ReactJSapp

Below all the steps are described order-wise to use styled-components in React.

Installation:

  • Step 1: Before moving further, firstly we have to install the typewriter-effect, by running the following command in your project directory, with the help of terminal in your src folder or you can also run this command in Visual Studio Code’s terminal in your project folder.
    npm install --save typewriter-effect
    yarn add typewriter-effect
  • Step 2: After installing the package, now open your App.js file which is present inside your project’s directory, under the src folder, and delete the code present inside it.
  • Step 3: Now import React and typewriter-effect package.
  • Step 4: In your app.js file, add this code snippet to import React and typewriter-effect package.
    import React from 'react';
    import Typewriter from "typewriter-effect";

Below is a sample program to illustrate the use of the typewriter-effect :



Filename- App.js:

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("GeeksForGeeks")
         
       .pauseFor(1000)
       .deleteAll()
       .typeString("Welcomes You")
       .start();
       }}
       />
    </div>
  );
}
  
export default App;

Filename- App.css

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:100vh;
  background:green;
}

Output: Hence using the above-mentioned steps, we can use the typewriter-effect to import and change the typing animation React




My Personal Notes arrow_drop_up
Recommended Articles
Page :