use-click-coordinates

The usesClickCoordinates hook is for capturing click coordinates, this is useful when positioning a tooptip or creating visual effects

Module

import { useClickCoordinates } from "@atomico/hooks/use-click-coordinates";

Syntax

useClickCoordinates(ref, handlerClick);

where:

1. ref: node reference to observe the click event.

2. handlerClick: Callback that receives the coordinates of the click event.

Coordinates

interface Coordinates {
  x: number;
  y: number;
  offset: {
    x: number;
    y: number;
  };
}

Where :

• x: MouseEvent.clientX

• y: MouseEvent.clientY

• offset.x : MouseEvent.offsetX

• offset.Y : MouseEvent.offsetY

Example

WebComponents.devWebComponents.dev