Pointer Events en React
Como parte de la última versión 16.4.0 de React que fue lanzada hace un par de días, viene el soporte de los Pointer Events. En general estos eventos son un símil a los mouse events que existen actualmente, la diferencia es que estos pointer events son hardware-agnostic. Por lo tanto, estos eventos vendrán con una propiedad extra llamada pointerType, la cual tendrá 3 valores posibles: mouse, pen y touch. La idea de estos nuevos eventos es dar la posibilidad de mejorar la experiencia de usuario dependiendo de la forma con que este interactúa con nuestra aplicación.
La lista de los pointer events es la siguiente:
onPointerDownonPointerMoveonPointerUponPointerCancelonGotPointerCaptureonLostPointerCaptureonPointerEnteronPointerLeaveonPointerOveronPointerOut
Como pueden ver, estos eventos son análogos a los Mouse Events, esto es intencional para poder facilitar la migración hacia estos nuevos eventos.
Para poder jugar un rato hice un fork del codesandbox compartido en el blog de React, en el cual agregué el tipo de pointer que el usuario usa. Si lo abren desde un desktop, les va a decir que esta usando mouse pero si lo abren en su mobile va a salir touch.
Es importante tener en cuenta que estos pointer events en React van a funcionar en los browsers que los soporten. Según https://caniuse.com los siguientes browsers soportan estos eventos:
Por último, una aclaración: estos pointer events no están relacionados con los pointer-events de CSS 😌.
Eso con respecto a los Pointer Events en React, espero que les haya gustado.
¿Y tú, estás usando pointer events en tus proyectos?
