@supunlakmal/hooks/dist/hooks/user-interface-dom/useMousePosition.js

A collection of reusable React hooks

import { useState, useEffect } from 'react';
const initialState = {
    x: null,
    y: null,
    screenX: null,
    screenY: null,
    pageX: null,
    pageY: null,
};
/**
 * Custom hook to track the current position of the mouse pointer.
 *
 * @returns An object containing the mouse coordinates (relative to viewport, screen, and page).
 */
export function useMousePosition() {
    const [mousePosition, setMousePosition] = useState(initialState);
    useEffect(() => {
        if (typeof window === 'undefined') {
            return; // Don't run on server
        }
        const handleMouseMove = (event) => {
            setMousePosition({
                x: event.clientX,
                y: event.clientY,
                screenX: event.screenX,
                screenY: event.screenY,
                pageX: event.pageX,
                pageY: event.pageY,
            });
        };
        window.addEventListener('mousemove', handleMouseMove);
        // Initial state check (in case mouse is already over the window before mount)
        // Note: This won't capture position if the mouse isn't moved after mount.
        // Consider alternative strategies if initial position without movement is critical.
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
        };
    }, []);
    return mousePosition;
}
//# sourceMappingURL=useMousePosition.js.map