use-click-coordinates.md

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

use-click-coordinates

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

{% embed url="https://webcomponents.dev/edit/collection/n2tZyzx4LMKqk1jNE0e9/J9YAAYlyqBw47z2twgAj/src/index.jsx" %}