What are the Pointer Events supported in React?

Pointer Events provide a unified way of handling all input events. In the old days we had a mouse and respective event listeners to handle them but nowadays we have many devices which don't correlate to having a mouse, like phones with touch surface or pens. We need to remember that these events will only work in browsers that support the Pointer Events specification.

The following event types are now available in React DOM:

1. onPointerDown
2. onPointerMove
3. onPointerUp
4. onPointerCancel
5. onGotPointerCapture
6. onLostPointerCapture
7. onPointerEnter
8. onPointerLeave
9. onPointerOver
10. onPointerOut

Practical Code Example

// Pointer Events normalize touch, mouse, and stylus pen inputs:
function Canvas() {
  return (
    <div
      onPointerDown={(e) => console.log('Pointer down at:', e.clientX, e.clientY)}
      onPointerUp={() => console.log('Pointer released')}
      onPointerMove={(e) => console.log('Pointer moved:', e.pointerType)}
    />
  );
}