Warning: session_start(): open(/tmp/sess_f73a5d96e3e79777a640a291c92b71bf, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Get The Mouse Position (Coordinates) In React - LearnShareIT

How To Get The Mouse Position (Coordinates) In React

Get the Mouse position (coordinates) in React

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:

get the mouse position (coordinates) in React

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:

Leave a Reply

Your email address will not be published. Required fields are marked *