by Indrek Lasn

👆 Pointer events in React — the why, how, and what

Let’s talk about events, more specifically pointer events.

What are pointer events?

Pointer events provide a unified way of handling all input events.

Back in the good old days we only had a mouse, and listening for events was simple. The web content assumed the user’s pointing device would be a mouse.

Note: This story was originally published at strilliant.com — please give some love to the original too! ❤

Nowadays we have many devices which don’t correlate to having a mouse, like phones with touch surface or pens.

How can we listen for events if the user doesn’t have a mouse?

Touch events to the rescue!

https://www.w3.org/TR/touch-events/
https://caniuse.com/#search=touch

The touch events’ interfaces are relatively low-level APIs that can be used to support application-specific multi-touch interactions such as a two-finger gesture.

A multi-touch interaction starts when a finger (or stylus) first touches the contact surface. Other fingers may subsequently touch the surface and optionally move across the touch surface. The interaction ends when the fingers are removed from the surface. During this interaction, an application receives touch events during the start, move and end phases.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

Adding touch event listeners is rather simple but you have to support both the touch and mouse:

http://jsbin.com/libayejike/edit?js,console,output

Try the example on your phone too. Try using it on the desktop version to split the screen and then inspect the console.log output.

testing touch events on iPhone

Supporting both the touch and mouse events can become very bloated and hard to maintain since you basically have to code events for different devices.

Pointer events to the rescue!

https://w3c.github.io/pointerevents/
check out this awesome polyfill by the jQuery team to enable support for pointer events on most browsers

Remember our example above where we had 2 event listeners — one for the mouse and one for the touch?

Well instead of writing two event listeners, we can simply change one of them to pointermove and remove the rest.

http://jsbin.com/xexotimade/edit?js,console,output
https://github.com/jquery/PEP/blob/master/README.md

It’s amazing what browsers can do today! Fingers crossed we have fully native experience inside browsers someday.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events

React recently launched version 16.4 with native pointer events support.

Let’s create a quick react project and try out these new nifty events. Update to the latest create-react-version and start the project.

Since pointer events support touch events, we want to test it on our phone too. Open the app on your phone with via on your network: http://xxx.xxx.x.xx:3000/ url.

Opening the react app with my phone

We start off by creating the same circle and declaring a state called hasCapture:

Next up, let’s add onPointerEnter and onPointerLeave — which is exactly how it sounds, when you hover over the element.

onPointerEnter and onPointerLeave

But what’s the difference between onPointerEnter and onMouseEnter?

source: https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen

In a nutshell, using pointer events we’re supporting more devices and it’s probably the future way of doing events.

Check out this more practical example using pointer events.

Thanks for reading, I also share useful content on Twitter, might be worth your time to check out. Stay awesome! ❤

Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek): "I just published "Introducing https://t.co/wIhICx6ayg"…twitter.comThe secret to being a top developer is building things! Here’s a list of fun apps to build!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.orgWant to be a top developer? You should build things. Here’s another list to get you started.
Due to high demand I’m extending the list of fun apps to build. 😁medium.freecodecamp.org How to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Separating your frontend and backend has many advantages:medium.freecodecamp.org✨ Immensely upgrade your development environment with these Visual Studio Code extensions
Let’s talk about Code — Visual Studio Code.medium.freecodecamp.orgSupercharge your debugging experience for Node.js
You see this, what do you do?medium.com