useMouse

A custom hook for tracking mouse position and handling mouse events.

Add hook

Create a file use-mouse.ts and copy & paste the code from useMouse.

Hook

 
import { useEffect, useState } from 'react';
 
interface MousePosition {
    x: number | undefined;
    y: number | undefined;
}
 
export const useMouse = (eventType: 'mousemove' | 'mouseenter' | 'click', callback?: () => void): MousePosition => {
    const [mousePosition, setMousePosition] = useState<MousePosition>({ x: undefined, y: undefined });
 
    const updateMousePosition = (event: MouseEvent) => {
        setMousePosition({
            x: event.clientX,
            y: event.clientY,
        });
 
        if (callback) callback();
    };
 
    useEffect(() => {
        window.addEventListener(eventType, updateMousePosition);
 
        return () => {
            window.removeEventListener(eventType, updateMousePosition);
        };
    }, [eventType, callback]);
 
    return mousePosition;
}

Usage

 
import React from 'react';
import { useMouse } from './hooks/use-mouse';
 
function App() {
    const mousePosition = useMouse('mousemove');
 
    return (
        <div>
            <h1>Mouse Position</h1>
            <p>X: {mousePosition?.x}</p>
            <p>Y: {mousePosition?.y}</p>
        </div>
    );
}
 
export default App;

API

Parameters

Name	Type	Description
`eventType`	`mousemove \| mouseente \| click`	The type of mouse event to listen for.
`callback`	`() => void`	(Optional) A function to call when the specified mouse event is triggered.

Returns

Name	Type	Description
`x`	`number \| undefined`	The x-coordinate of the mouse pointer.
`y`	`number \| undefined`	The y-coordinate of the mouse pointer.

Contributors

useMediaQuery useLocalStorage