useMousePosition

Tracks the mouse position return its X and Y.

Installation

npx rabbithook@latest add use-mouse-position

Usage

App.tsx

import useMousePosition from "@/hooks/use-mouse-position";

function Component() {
  const { x, y } = useMousePosition();

  return (
    <p>Mouse position: {x}, {y}</p>
  );
}

Code

Typescript

use-mouse-position.ts

import { useEffect, useState } from "react";

type MousePosition = {
  x: number;
  y: number;
};

function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({} as MousePosition);

  useEffect(() => {
    const handleMouseMove = (event: MouseEvent) => {
      setMousePosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return mousePosition;
}

export default useMousePosition;

Javascript

use-mouse-position.js

import { useEffect, useState } from "react";

function useMousePosition() {
  const [mousePosition, setMousePosition] = useState({});

  useEffect(() => {
    const handleMouseMove = (event) => {
      setMousePosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener("mousemove", handleMouseMove);

    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return mousePosition;
}

export default useMousePosition;