- Published on
useMouse Hook React
![useMouse Hook React](https://user-images.githubusercontent.com/33494971/269602373-9aa20fcb-72ca-49ca-902c-e5866a74bf0e.png)
useMouse Hook React
useMouse Code and Usage
useMouse is a hook to track the mouse position.
import { useState, useEffect } from "react";
const useMouse = () => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setMousePosition({
x: event.clientX,
y: event.clientY,
});
};
useEffect(() => {
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}, []);
return mousePosition;
};
// Usage
const MousePositionExample = () => {
const { x, y } = useMouse();
return (
<div>
<p>
Mouse Position: X: {x}, Y: {y}
</p>
</div>
);
};