useMouseMove
Listen to mouse move events with a React hook.
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
andy
(default if no variant is specified) -
MouseMoveVariant.Client
:clientX
andclientY
-
MouseMoveVariant.Movement
:movementX
andmovementY
(relative movement) -
MouseMoveVariant.Offset
:offsetX
andoffsetY
-
MouseMoveVariant.Page
:pageX
andpageY
-
MouseMoveVariant.Screen
:screenX
andscreenY
💗
Sponsor If you are a fan of this project, you may become a sponsor via GitHub's Sponsors Program.