Acredito que o React — biblioteca de componentes criada e mantida pelo time de engenheiros e engenheiras de software do Facebook — dispensa apresentações. A biblioteca é a paixão mais recente não somente dos programadores e programadoras front-end, mas como do próprio mercado de tecnologia.

Na última semana, a versão 16.4.0 do React foi lançada e atendeu um pedido recorrente dos usuários: suporte aos pointer events (em tradução livre, seria algo como eventos de ponteiro). Neste artigo, vamos dar uma olhada em como isso funciona.

ps: O changelog com todas as mudanças está disponível aqui.


Já conhece o nosso curso de React 16?

Se você ainda não está por dentro de todas as novidades da última versão do React, te convido a visitar o nosso curso sobre o tema! Confere lá! ;)


Espera aí, o que são pointer events?

Pegando a definição diretamente do MDN web docs, os pointer events são eventos que nos permitem controlar o comportamento de um dado elemento visual na tela em relação as ações do mouse (ou de qualquer dispositivo utilizado como input, como canetas ou os seus dedos, no caso de aparelhos com suporte a toque).

Hoje felizmente todas as últimas versões dos navegadores modernos já dão suporte a esta API, mas caso sua aplicação dependa exclusivamente desta funcionalidade, o time do React recomenda que você utilize pollyfills terceiros para suportar a funcionalidade. De acordo com os desenvolvedores, estes pollyfills não foram adicionados no React DOM para não aumentar o seu tamanho.

Pointer Events no React

Nesta última versão, os seguintes eventos foram adicionados ao React DOM:

  • onPointerDown : disparado quando o ponteiro se torna ativo
  • onPointerMove : disparado quando o ponteiro muda suas coordenadas
  • onPointerUp : disparado quando o ponteiro não está mais ativo
  • onPointerCancel : o nosso navegador dispara esse evento se concluir que o ponteiro não será mais capaz de gerar eventos (por exemplo, o dispositivo relacionado é desativado).
  • onGotPointerCapture : disparado quando um elemento recebe uma captura (evento).
  • onLostPointerCapture : disparado após a captura do ponteiro ser liberada para um ponteiro.
  • onPointerEnter : disparado quando um dispositivo é movido para os limites de ocorrência de um elemento ou um de seus descendentes.
  • onPointerLeave : comportamento contrário ao anterior. É disparado quando um dispositivo sai dos limites de ocorrência de um elemento ou de um de seus descendentes.
  • onPointerOver : semelhante ao onPointerEnter
  • onPointerOut : em geral, funciona como o evento onPointerLeave , mas com algumas diferenças.

Para mostrar o seu funcionamento, a equipe criou um exemplo muito interessante: um círculo que reage a posição que você o arrasta. O conceito é muito simples: os eventos onPointerDown, onPointerMove, onPointerUp são utilizados para interceptar a movimentação do elemento na tela. Quando soltamos o elemento, o evento onPointerCancel é disparado e a última posição dele é armazenada no estado.

O exemplo está disponível neste link.

Clique e arraste o elemento para ver seu funcionamento

O código a seguir corresponde ao código do círculo verde. Repare que para cada um dos pointer events, há uma função correspondente que responde a esta ação:

return (
<div style={boxStyle}>
<div
style={circleStyle}
onPointerDown={this.onDown}
onPointerMove={this.onMove}
onPointerUp={this.onUp}
onPointerCancel={this.onUp}
onGotPointerCapture={this.onGotCapture}
onLostPointerCapture={this.onLostCapture}
/>
</div>
);

Bem bacana, né? Isso vai facilitar bastante a criação de aplicações interativas utilizando o React.


Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos conteúdos!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.brFacebook, Twitter, Youtube

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Diego Martins de Pinho

Written by

Desenvolvedor de Software, Fundador da CodePrestige e autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript

Code Prestige

Artigos, notícias e dicas sobre o melhor da tecnologia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade