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

Module

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

Syntax

1
useClickCoordinates(ref, handlerClick);
Copied!
where:
  1. 1.
    ref: node reference to observe the click event.
  2. 2.
    handlerClick: Callback that receives the coordinates of the click event.

Coordinates

1
interface Coordinates {
2
x: number;
3
y: number;
4
offset: {
5
x: number;
6
y: number;
7
};
8
}
Copied!
Where :
  • x: MouseEvent.clientX
  • y: MouseEvent.clientY
  • offset.x : MouseEvent.offsetX
  • offset.Y : MouseEvent.offsetY

Example

WebComponents.dev
WebComponents.dev
Last modified 2mo ago
Copy link
Edit on GitHub