O efeito de máquina de escrever no ReactJS é um pacote JS que pode ser usado para um melhor design de IU. Este efeito nos permite criar uma animação de digitação simples no ReactJS. Para usar Typewriter no ReactJS, precisamos instalar o pacote do efeito typewriter.

Pré-requisitos:

• Noções básicas de ReactJS
• ReactJSapp já criado

Abaixo, todas as etapas são descritas em ordem para usar os componentes estilizados no React.

Instalação:

• Passo 1: Antes de prosseguir, primeiro temos que instalar o efeito máquina de escrever, executando o seguinte comando no diretório do seu projeto, com a ajuda do terminal em sua pasta src ou você também pode executar este comando no terminal do Visual Studio Code em seu pasta de projeto.

  npm install - salvar efeito de máquina de escrever

  fio adiciona efeito de máquina de escrever

• Passo 2: Após instalar o pacote, agora abra o arquivo App.js que está presente no diretório do seu projeto, na pasta src, e exclua o código presente dentro dele.
• Passo 3: Agora importe o React e o pacote de efeitos de máquina de escrever.
• Etapa 4: Em seu arquivo app.js, adicione este snippet de código para importar o React e o pacote de efeito de máquina de escrever.

  import React from 'react';
  importar Máquina de escrever do "efeito máquina de escrever";

Abaixo está um programa de amostra para ilustrar o uso do efeito de máquina de escrever:

Nome do arquivo- 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;

Nome do arquivo- 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;
}

Saída: Portanto, usando as etapas mencionadas acima, podemos usar o efeito máquina de escrever para importar e alterar a animação de digitação React .