UseMouse

1'use client';
2 
3import { RefObject, useCallback, useEffect, useState } from 'react';
4 
5export type UseMouseOptions = {
6  ref: RefObject<HTMLElement>;
7  trackOutside?: boolean;
8  clampToZero?: boolean;
9};
10 
11/**
12 * Data returned by the useMouse hook
13 *
14 * @property docX - Mouse X position in the document (pageX)
15 * @property docY - Mouse Y position in the document (pageY)
16 * @property posX - Element X position on the page (relative to document)
17 * @property posY - Element Y position on the page (relative to document)
18 * @property elX - Mouse X position relative to the element
19 * @property elY - Mouse Y position relative to the element
20 * @property elH - Element height
21 * @property elW - Element width
22 */
23type MouseData = {
24  docX: number;
25  docY: number;
26  posX: number;
27  posY: number;
28  elX: number;
29  elY: number;
30  elH: number;
31  elW: number;
32};
33 
34export function useMouse({
35  ref,
36  trackOutside = false,
37  clampToZero = false,
38}: UseMouseOptions): MouseData {
39  if (process.env.NODE_ENV === 'development') {
40    if (!ref?.current) {
41      console.error(
42        'useMouse: ref is required and must point to an HTMLElement!',
43      );
44    }
45  }
46 
47  const [state, setState] = useState<MouseData>({
48    docX: 0,
49    docY: 0,
50    posX: 0,
51    posY: 0,
52    elX: 0,
53    elY: 0,
54    elH: 0,
55    elW: 0,
56  });
57 
58  const moveHandler = useCallback(
59    (event: MouseEvent) => {
60      if (ref && ref.current) {
61        const {
62          left,
63          top,
64          width: elW,
65          height: elH,
66        } = ref.current.getBoundingClientRect();
67        const posX = left + window.pageXOffset;
68        const posY = top + window.pageYOffset;
69        let elX = event.pageX - posX;
70        let elY = event.pageY - posY;
71 
72        // Clamps elX/elY to >= 0 if clampToZero
73        if (clampToZero) {
74          elX = Math.max(0, elX);
75          elY = Math.max(0, elY);
76        }
77 
78        // If not tracking outside the element, only update if the mouse is inside
79        const isInside =
80          event.pageX >= posX &&
81          event.pageX <= posX + elW &&
82          event.pageY >= posY &&
83          event.pageY <= posY + elH;
84 
85        if (trackOutside || isInside) {
86          const nextState: MouseData = {
87            docX: event.pageX,
88            docY: event.pageY,
89            posX,
90            posY,
91            elX,
92            elY,
93            elH,
94            elW,
95          };
96 
97          // Updates only if some value has changed
98          setState((prev) => {
99// … truncated