Texto de: Marlliton Souza
Recentemente eu estava desenvolvendo um projeto e tive a ideia de fazer o efeito de máquina de escrever. Pesquisando um pouco, percebi que a grande maioria dos tutoriais usava uma biblioteca de terceiros para construir esse efeito, e eu não estava nem um pouco a fim de instalar uma biblioteca no meu projeto simplesmente para fazer essa animação.
Então, resolvi colocar a mão na massa e desenvolver um componente capaz de produzir esse efeito. E foi um desafio pela maneira como o React interage com o DOM, mas no final obtive o seguinte resultado:
Pré-requisitos
A princípio, para que você consiga prosseguir e alcançar o mesmo resultado apresentado acima, você precisa ter um projeto React ou Next e configurar o Tailwind CSS no seu projeto. O Tailwind não é obrigatório, você pode fazer tudo com CSS puro, mas optei pelo uso do Tailwind neste exemplo, ok? Depois de configurar o projeto, vamos desenvolver nosso componente. Para isso, criaremos um componente com o nome MaquinaDeEscrever ou algum outro nome do seu agrado:
No meu caso, eu criei a pasta components e dentro dela o arquivo MaquinaDeEscrever. Depois que você criar o componente, exporte uma função com o mesmo nome:
Este componente só tem um estado, e ela retorna o valor desse estado. Agora temos que, de alguma forma, fazer esse componente escrever o valor do estado na tela simulando uma máquina de escrever.
Olhando o código acima, nós só criamos uma função chamada escreverNaTela e a única coisa que essa função faz é alterar o estado do componente, sempre adicionando uma letra após a outra, usando recurção.
Outra coisa importante que esse componente está fazendo é chamando a função em um useEffect que tem como lista de sensibilidade um array vazio. Mas o que isso quer dizer? Bom, isso significa que essa função será chamada logo depois que o DOM (Document Object Model) for carregado.
Usando o componente
A partir de agora, já podemos usar o nosso componente em qualquer parte da nossa aplicação. Utilizarei esse componente no meu arquivo index.jsx. Você pode chamá-lo em qualquer parte da sua aplicação/árvore de componentes.
Como pode ver, o meu index só tem estilos feitos com o Tailwind CSS e a chamada ao componente. Após criar o componente, precisamos passar o texto via props para o efeito ser aplicado e já podemos conferir o resultado no navegador:
Agora já temos um resultado aceitável, concorda? Porém, esse resultado ainda está diferente do resultado proposto no início do artigo. Então, voltaremos para o código para finalizar o componente.
Vamos entender o que mudou aqui. A princípio, nós definimos um novo estado, que define quando o cursor dever ser exibido ou não, e mudamos esse estado conforme a nossa preferência. Também temos uma nova propriedade chamada delay. Essa propriedade define um abraso, entre uma frase e outra.
Animando o cursor
Logo após o return da função dentro da div, temos um span que representa o cursor. Esse span tem uma animação bem simples e para que ela funcione no Tailwind CSS, precisamos definir essa animação em nosso arquivo tailwind.config.js, mais especificamente na chave extend:
E agora, finalmente podemos visualizar o resultado do nosso componente.
Agora podemos instanciar três componentes MaquinaDeEscrever cada um com um texto diferente e um valor diferente de delay. Como resultado teremos em nosso navegador o seguinte efeito:
Conclusão
Se você chegou até aqui, agora você poderá criar a sua própria versão melhorada desse projeto. Você pode ver o código completo no GitHub.
