Skip to content
Related Articles
Open in App
Not now

Related Articles

How to create typewriter effect in ReactJS ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 25 Jan, 2021
Improve Article
Save Article

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.


  • Basics of ReactJS
  • Already created ReactJSapp

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


  • 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:


import React from 'react';
//importing typewriter-effect
import Typewriter from "typewriter-effect";
import './App.css';
function App() {
  return (
    <div className="App">
       onInit={(typewriter)=> {
       .typeString("Welcomes You")
export default App;

Filename- App.css


.App {
  font-family: sans-serif;
  text-align: center;

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
Related Articles

Start Your Coding Journey Now!