On May 23rd, 2018 a new minor release v16.4.0 of React has been launched. Overall, it's a rather uneventful release mostly concerned with fixing a variety of bugs. Quite notably though, it adds support for pointer events which has been an often requested feature for almost the entire existence of React.
Pointer events, in essence, are very similar to mouse events (mousedown, mouseup, etc.) but are hardware-agnostic and thus can handle all input devices such as a mouse, stylus or touch. This is great since it removes the need for separate implementations for each device and makes authoring for cross-device pointers easier.
Pointer events
The API of pointer events works in the same manner as existing various event handlers. Pointer events are added as attributes to React component and are passed a callback that accepts an event. Inside the callback we process the event. The following pointer events have been added to React DOM:
- onPointerDown
- onPointerMove
- onPointerUp
- onPointerCancel
- onGotPointerCapture
- onLostPointerCapture
- onPointerEnter
- onPointerLeave
- onPointerOver
- onPointerOut
When pointer events are fired is well explained on MDN Pointer events documentation so keep it as a reference for in-depth explanation of each event. Note that at the time of this writing, pointer events are not supported by Safari.
For an example of how pointer events can be incorporated on your own application, have a look at the below example by Philip Spiess. I added PEP polyfill to also make it work on Safari. Note that onGotPointerCapture and onLostPointerCapture events still do not work even with the polyfill.
Check out this demo on Code Sandbox to get a glimpse of what's possible with new pointer events. Hint: try dragging the circle on various devices.
Top comments (0)