quisido/use-mouse-move

React hook for listening to mouse move events

useMouseMove

Listen to mouse move events with a React hook.

• Install
• Use
  • Variants
• Sponsor

Install

• npm install use-mouse-move or
• yarn add use-mouse-move

Use

import useMouseMove from 'use-mouse-move';

function App() {
  const [x, y] = useMouseMove();
  return (
    <p>
      Your mouse coordinates are {x}, {y}.
    </p>
  );
}

Variants

The useMouseMove hook accepts one parameter -- a MouseMoveVariant enum that you can import from the use-mouse-move package. These variants coincide with the different x/y coordinates emit by mouse move events.

import useMouseMove, { MouseMoveVariant } from 'use-mouse-move';
useMouseMove(MouseMoveVariant.Default);

• MouseMoveVariant.Default: x and y (default if no variant is specified)
• MouseMoveVariant.Client: clientX and clientY
• MouseMoveVariant.Movement: movementX and movementY (relative movement)
• MouseMoveVariant.Offset: offsetX and offsetY
• MouseMoveVariant.Page: pageX and pageY
• MouseMoveVariant.Screen: screenX and screenY

Sponsor 💗

If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.