Desenvolvimento

22 jun, 2018

Criando efeito de digitação em componentes React

Publicidade

Com a evolução dos chatbots nos sites, aplicativos e afins, um dos efeitos visuais que tem aparecido bastante é o de digitação. Basicamente, a ideia é que o texto não apareça de uma vez, mas sim, letra por letra, como se realmente estivesse sendo escrito em tempo real por alguém do outro lado da tela.

É um efeito trivial, mas que torna a experiência com o chatbot mais realista e agradável para o usuário, afinal, parece que realmente ele está conversando com alguém em tempo real.

Por me interessar bastante por esse efeito, comecei a desenvolver uma pequena aplicação web que o utilizasse. A primeira experiência foi com um algoritmo muito simples que encontrei no W3Schools. Veja o código a seguir:

var i = 0;
var txt = 'Lorem ipsum typing effect!';
var speed = 50;

function typeWriter() {
  if (i < txt.length) {
        document.getElementById("demo").innerHTML += txt.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
  }
}

Você pode reproduzir este exemplo no CodePen clicando aqui.

Notem que apesar do código ser simples, ele já reproduz um efeito interessante. A ideia é iterar o texto dentro de um laço “for” e utilizar a recursividade através do método setTimeOut() para que o texto continue sendo reproduzido de acordo com a velocidade estabelecida na variável speed.

Simples, mas eficaz.

No entanto, recentemente tenho estudado bastante o React e quis passar este efeito para dentro de uma aplicação que utilizasse componentes. Antes de sair codificando, procurei por alternativas interessantes e encontrei algumas que gostaria de compartilhar com vocês

React Typist

O React Typist foi uma das primeiras bibliotecas que encontrei. Ela não é muito conhecida (possui um pouco mais de 500 estrelas no GitHub), mas cumpre muito bem o seu papel. Seu funcionamento é bem simples: para todo texto que você deseja colocar o efeito, basta inserir dentro do wrapper <Typist>. Se não passarmos nenhuma propriedade, ela assume alguns valores padrões e o efeito já acontece em todo o texto contido dentro do wrapper.

Ao final, seu componente será muito semelhante a este:

import React, {Component} from 'react';
import Typist from 'react-typist';

export default class MyComponent extends Component {

 render() {
   return (
     <Typist>
       Animate this text.
     </Typist>
   );
 }
}

E o resultado será como este. Na documentação oficial há todos os detalhes das configurações possíveis, mas podemos inserir delays (através do Typist.Delay), backspace (através do Typist.Backspace), assim como alterar a velocidade da animação, o cursor e os eventos de início e término.

Para quem quiser experimentar, basta instalar com o comando npm install –save react-typist.

React Typing Animation

O React Typing Animation é ainda menor que o antecessor, mas funciona tão bem quanto. A ideia é basicamente a mesma, aplicar o efeito dentro do que estiver contido dentro do wrapper. Só que desta vez, o wrapper é o componente <Typing>. No componente mais simples possível, poderíamos ter algo assim:

import Typing from 'react-typing-animation';

const AnimatedTypingComponent = () => (
 <Typing>
   <span>This span will get typed.</span>
 </Typing>
);

Com isso, temos um resultado como este. Um diferencial bacana desta biblioteca é que ela não possui dependências externas, ou seja, tudo o que é necessário está contido no próprio pacote. Grande parte das propriedades também estão presentes aqui, nos permitindo alterar a velocidade, quebras de linhas, backspace, delay e os eventos de início e término.

Para quem quiser experimentar, basta instalar com o comando npm install –save react-typing-animation.

Conclusão

Essas são as duas opções mais interessantes que encontrei para realizar este efeito dentro das aplicações em React. Nos estudos acabei encontrando outras, mas não funcionaram tão bem. Se acharem interessante, posso mostrar como fazer para integrar elas junto ao react-intl, biblioteca do Yahoo que nos permite internacionalizar os textos dentro de aplicações React.

Referências