useMousePosition

1'use client'
2 
3import * as React from 'react'
4 
5export function useMousePosition<T extends Element>(element?: T) {
6  const [position, setPosition] = React.useState({ x: 0, y: 0 })
7 
8  React.useEffect(() => {
9    const targetElement = element ?? document
10    const abortController = new AbortController()
11 
12    targetElement.addEventListener('mousemove', (event) => {
13      const mouseEvent = event as MouseEvent
14      const rect = (mouseEvent.currentTarget as HTMLElement)?.getBoundingClientRect()
15      const x = Math.max(0, Math.round(mouseEvent.pageX - rect.left - window.scrollX))
16      const y = Math.max(0, Math.round(mouseEvent.pageY - rect.top - window.scrollY))
17 
18      setPosition({ x, y })
19    }, { signal: abortController.signal })
20 
21    return () => {
22      abortController.abort()
23    }
24  }, [element])
25 
26  return position
27}