React Hooks - Track user mouse position - via: https://twitter.com/JoshWComeau

useMousePosition.md

Hook

import { useState, useEffect } from "react";

const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState({ x: null, y: null });

  const updateMousePosition = ev => {
    setMousePosition({ x: ev.clientX, y: ev.clientY });
  };

  useEffect(() => {
    window.addEventListener("mousemove", updateMousePosition);

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

  return mousePosition;
};

export default useMousePosition;

Usage

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

  const hasMovedCursor = typeof x === "number" && typeof y === "number";

  return (
    <div className="App">
      <h1>
        {hasMovedCursor
          ? `Your cursor is at ${x}, ${y}.`
          : "Move your mouse around."}
      </h1>
    </div>
  );
}

When you add the {x,y} value from the hook to an onMouseEnter prop, the events is called whenever the mouse moves on the dom instead of only on the component that the event is set for.