Knowing how to get the mouse position (coordinates) in React is very helpful to you if you want to interact with the Window or set events according to the mouse position. So how to do it? Let’s go into detail now.
Get the mouse position (coordinates) in React
The mouseEvent clientX property
The React event method provided us with many valuable properties to handle events. One of them has clientX property. The mouse event clientX property will return.
Syntax:
event.clientX
Example:
import "./App.css";
import { useState } from "react";
const App = () => {
const [mousePosition, setMousePosition] = useState();
const handleClick = (e) => {
console.log(e.clientX);
// Set value to current mouse pointer's horizontal coordinate
setMousePosition(e.clientX);
};
return (
<>
<button onClick={handleClick}>
Click to get Mouse horizontal coordinate
</button>
<h1>Mouse horizontal coordinate: {mousePosition}</h1>
</>
);
};
export default App;
Output:
As you see, when I change the position to click the horizontal button, the value also changes.
Use the mouse event client
The mouse event clientY is also used like clientX but will return the mouse pointer’s vertical coordinate.
Syntax:
event.clientY
Example:
import "./App.css";
import { useState } from "react";
const App = () => {
const [mousePosition, setMousePosition] = useState();
const handleClick = (e) => {
console.log(e.clientY);
// Set value to current mouse pointer's vertical coordinate
setMousePosition(e.clientY);
};
return (
<>
<button style={{ padding: "100px" }} onClick={handleClick}>
Click to get Mouse vertical coordinate
</button>
<h1>Mouse vertical coordinate: {mousePosition}</h1>
</>
);
};
export default App;
Output:
As you see, the value will change when I vertically change the mouse pointer.
Use mouse event offsetLeft property
The mouse event offsetLeft property will return the left coordinate of the mouse pointer relative to the parent.
Syntax:
event.target.offsetleft
Example:
import "./App.css";
import "./App.css";
import { useState } from "react";
const App = () => {
const [mousePosition, setMousePosition] = useState();
const handleClick = (e) => {
setMousePosition(e.target.offsetLeft);
};
return (
<div style={{ width: "500px" }}>
<button onClick={handleClick}>
Click to get left coordinate of the mouse pointer{" "}
</button>
<h1>Mouse left coordinate : {mousePosition}</h1>
</div>
);
};
export default App;
Output:
Here I wrap the button element inside a div and set the width to 500px so that the value is the coordinate of the mouse pointer to the left of that div.
Use mouse event offsetTopproperty
The mouse event offsetTop will return the top coordinate of the mouse pointer relative to the parent.
Syntax:
event.target.offsetTop
Example:
import "./App.css";
import { useState } from "react";
const App = () => {
const [mousePosition, setMousePosition] = useState();
const handleClick = (e) => {
console.log(e.target.offsetTop);
setMousePosition(e.target.offsetTop);
};
return (
<div style={{ width: "500px" }}>
<button onClick={handleClick}>
Click to get Top coordinate of the mouse pointer{" "}
</button>
<h1>Mouse Top coordinate : {mousePosition}</h1>
</div>
);
};
export default App;
Output:
Get the mouse position (coordinates) relative to the element
The logic here is you can use the clientX and clientY properties to get the distance from the mouse position to your current viewport, then subtract it with offsetLeft and offsetTop to get the position of the mouse pointer relative to the element.
Example:
import "./App.css";
import { useState } from "react";
const App = () => {
const [mousePosition, setMousePosition] = useState({
positionX: 0,
positionY: 0,
});
const handleMouseMove = (e) => {
setMousePosition({
positionX: e.clientX - e.target.offsetLeft,
positionY: e.clientY - e.target.offsetTop,
});
};
return (
<>
<div
style={{ width: "500px", backgroundColor: "black", height: "500px" }}
onMouseMove={handleMouseMove}
></div>
<h1>Mouse X coordinate : {mousePosition.positionX}</h1>
<h1>Mouse Y coordinate : {mousePosition.positionY}</h1>
</>
);
};
export default App;
Output:
Summary
In this article, I showed you how to get the mouse position (coordinates) in React. With it, you can make some cool effect base on the mouse position of the user. Hope it is useful to you.
Maybe you are interested:
- Using the substring() method in React
- How to downgrade React version 16 to 15
- How to downgrade React version 17 to 16
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm