¿Cómo crear un efecto de máquina de escribir en ReactJS?

El efecto de máquina de escribir en ReactJS es un paquete JS que se puede usar para un mejor diseño de interfaz de usuario. Este efecto nos permite crear una animación de escritura simple en ReactJS. Para usar Typewriter en ReactJS necesitamos instalar el paquete typewriter-effect.

requisitos previos:

• Fundamentos de ReactJS
• Ya creado ReactJSapp

A continuación, se describen todos los pasos ordenados para usar componentes con estilo en React.

Instalación:

• Paso 1: antes de continuar, primero debemos instalar el efecto de máquina de escribir, ejecutando el siguiente comando en el directorio de su proyecto, con la ayuda de la terminal en su carpeta src o también puede ejecutar este comando en la terminal de Visual Studio Code en su carpeta de proyecto.

  npm install --save typewriter-effect

  yarn add typewriter-effect

• Paso 2: después de instalar el paquete, abra su archivo App.js que se encuentra dentro del directorio de su proyecto, en la carpeta src, y elimine el código presente en su interior.
• Paso 3: ahora importe React y el paquete de efectos de máquina de escribir.
• Paso 4: en su archivo app.js, agregue este fragmento de código para importar React y el paquete de efectos de máquina de escribir.

  import React from 'react';
  import Typewriter from "typewriter-effect";

A continuación se muestra un programa de muestra para ilustrar el uso del efecto de máquina de escribir:

Nombre de archivo- App.js:

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;

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

Salida: por lo tanto, usando los pasos mencionados anteriormente, podemos usar el efecto de máquina de escribir para importar y cambiar la animación de escritura React .