Como criar Micro Interações em ReactJS?

Pode ser que você não esteja familiarizado com o termo Micro Interações, mas elas estão ao seu redor o tempo todo e fazem diferença no jeito que você utiliza uma aplicação.

Elas são pequenas e sutis, mas servem um grande propósito na web: manter o usuário interessado.

[adrotate banner=”4″]

Você se lembra daquela animação executada quando você curte post do Instagram?

Se a resposta foi não, ela cumpriu sua função. Na verdade, o Instagram é mestre em micro interações, na próxima vez que estiver navegando pela plataforma, tente contar quantas animações existem. Isso porque praticamente toda ação do usuário dispara uma micro interação.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 1

Micro interações podem ser disparadas pelo usuário ou pelo sistema, sempre visando informar algo ao usuário. Nós podemos dividir as micro interações em classes de acordo com seu objetivo. Neste artigo, vamos ver algumas das principais.

Progresso

Pode ser frustrante preencher algo sem saber quando se deve parar. Assim, podemos utilizar micro interações para deixar claro para o usuário quando ele atingiu o objetivo. Por exemplo: criação de senha.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 2

Visualização do estado de um campo

Existem casos em que o usuário precisará preencher um campo complexo, com muitos números. Por isso, ele pode facilmente se perder e gastar mais tempo tentando consertar um erro do que utilizando a aplicação.

Dessa forma, podemos utilizar as micro interações para facilitar essa tarefa.

Por exemplo: preenchimento de um boleto ou cartão de crédito.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 3

Feedback

Toda vez que o usuário realizar uma ação na aplicação, deve ficar claro para ele que a ação foi realizada.

Por exemplo: clique de um botão.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 4

Estado do sistema

Naturalmente, existirão momentos em que o usuário deve esperar a aplicação realizar uma ação. Pensando nisso, é importante manter o usuário informado que algo está acontecendo e ele precisa esperar.

Por exemplo: carregamento de imagem.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 5

Aplicando Micro Interações em ReactJS

Hoje, iremos ver 3 maneiras diferentes de criar/utilizar micro interações em React:

  • CSS Animations;
  • Bibliotecas de componentes;
  • React Simple Animate.

O primeiro exemplo que vamos ver será utilizando CSS Animations. No tutorial, vamos demonstrar isso utilizando o pacote styled-components. Porém, você pode utilizar um arquivo .css ou .module.css.

Para utilizar o styled-components, instale os pacotes necessários com os comandos:

npm install --save styled-components
npm install -D @types/styled-components

Criação de componente

Em seguida, vamos criar um componente chamado ConfirmButton e dar um estilo simples:

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 6

Desenvolvimento do botão

Agora, devemos ter um simples botão verde. Para adicionar nossa animação, vamos utilizar o seletor :hover e mudar o backgroundColor. Além disso, vamos utilizar uma tonalidade mais escura:

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 7

Agora, se você passar o mouse sobre o botão, vai perceber a mudança de cor. Entretanto, esse efeito não é nada natural. Por isso, para atingirmos nosso objetivo, precisamos utilizar a propriedade transition presente no CSS:

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 8

Com isso, teremos um botão que ligeiramente altera sua cor quando o mouse paira sobre ele.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 9

Assim, com esses poucos passos, temos nosso primeiro componente com micro interação.

Bibliotecas de componentes

Em seguida, veremos como bibliotecas de componentes podem facilitar nosso desenvolvimento. Nesse exemplo, vamos utilizar a biblioteca Material UI, que já disponibiliza vários componentes com micro interações, para criar um Skeleton que será visível enquanto alguma informação é carregada.

Para isso, instale a biblioteca com o comando:

npm install @material-ui/lab

Vamos adicionar dois Skeletons: um que representa uma imagem e outro para representar um texto.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 10

Para saber mais sobre o Skeleton acesse a documentação do Material UI. Após adicionar uma lógica para mostrar o Skeleton, enquanto a imagem e texto não são carregados, nosso componente estará pronto:

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 11

Por último, iremos mostrar como criar uma animação em Javascript utilizando o framework react-simple-animate.

Para instalar o framework, utilize o comando:

npm install --S react-simple-animate

Vamos criar um botão de curtir com uma animação simples de aumentar e diminuir seu tamanho quando tocado. Para isso, iremos criar um botão com uma imagem dentro, sendo essa imagem um svg de um coração.

Utilizando o hook useAnimateKeyframes, podemos definir os estágios da animação e ligar essa animação ao clique do botão.

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 12

Com isso, teremos o resultado:

Como criar Micro Interações em ReactJS? Luby Software
Como criar Micro Interações em ReactJS? 13

Veja também:

O que é e como utilizar Path Mapping

Conclusão

O react-simple-animate é um pacote poderoso e eu encorajo você a explorar suas funcionalidades. Contudo, ele não é o único e talvez você encontre o que precisa em outro pacote. Em nosso blog, o Matheus Medeiros fez um post demonstrando o uso do Lottie em React, clique aqui para acessar.

Espero que este artigo tenha te ajudado a entender melhor a filosofia por trás das micro interações e sua utilização. Como podemos concluir, sua implementação não necessita de um conhecimento avançado em animações, apenas uma boa noção de User Exprience.

Caso você queira experienciar essa demo, ela está disponível no meu GitHub, acesse clicando aqui.

Autor: Gustavo de Oliveira Marques

[adrotate banner=”5″]

Gostou do conteúdo? Compartilhe

Últimos posts

Fique por dentro das últimas novidades do mundo da tecnologia com os conteúdos do nosso blog!
Transformação Digital Logo Luby Azul

Acelere a Transformação Digital da sua Empresa

Basta preencher este formulário ou ligar para +55 11 3055 3404

Fale conosco

Technology Intelligence

Luby - Latin America

Rua Amália de Noronha, nº 151, 3º Andar, Sala 303
Pinheiros, São Paulo – SP – Brasil
CEP: 05410-010

Luby - North America

1110 Brickell Avenue
Suite 310
Miami – FL
United States

Copyright ©2023 Luby Software LLC. All rights reserved.

Rolar para cima