What are the Pointer Events supported in ReactJS?

React supports a wide range of Pointer Events, which provide a unified way to handle input from various pointing devices such as a mouse, touch, or pen. Pointer Events offer more detailed information about the pointer interactions than traditional mouse or touch events.

Here’s a list of the Pointer Events that are supported in React:

Supported Pointer Events in React

1. onPointerDown: Triggered when a pointer becomes active (e.g., when a mouse button is pressed, or a touch contact is initiated).
2. onPointerMove: Triggered when the pointer changes coordinates.
3. onPointerUp: Triggered when a pointer is no longer active (e.g., when a mouse button is released, or a touch contact ends).
4. onPointerCancel: Triggered when the browser determines that the pointer will no longer be able to generate events (e.g., when the touch screen is disabled).
5. onPointerEnter: Triggered when a pointer enters the boundaries of an element.
6. onPointerLeave: Triggered when a pointer leaves the boundaries of an element.
7. onPointerOver: Triggered when a pointer is moved onto an element or one of its child elements.
8. onPointerOut: Triggered when a pointer is moved out of an element or one of its child elements.
9. onGotPointerCapture: Triggered when an element captures a pointer.
10. onLostPointerCapture: Triggered when an element loses pointer capture.

Using Pointer Events in React

To use these events, you can simply add them as props to your React components. Here’s an example of how to handle some pointer events:

import React from 'react';

const PointerEventComponent = () => {
  const handlePointerDown = (event) => {
    console.log('Pointer Down', event);
  };

  const handlePointerMove = (event) => {
    console.log('Pointer Move', event);
  };

  const handlePointerUp = (event) => {
    console.log('Pointer Up', event);
  };

  const handlePointerEnter = (event) => {
    console.log('Pointer Enter', event);
  };

  const handlePointerLeave = (event) => {
    console.log('Pointer Leave', event);
  };

  return (
    <div
      style={{ width: '200px', height: '200px', backgroundColor: 'lightblue' }}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
    >
      Pointer Event Example
    </div>
  );
};

export default PointerEventComponent;

Notes

• Pointer Events are part of the Pointer Events API, which is designed to unify the handling of different input devices.
• The event handlers receive a pointer event object, which includes properties such as pointerId, pointerType (mouse, touch, pen), pressure, width, height, tiltX, tiltY, and others, providing detailed information about the pointer interaction.

By utilizing Pointer Events in React, you can create more flexible and responsive user interfaces that handle a variety of input types seamlessly.