React onPointerMove Event

React onPointerMove event fires when the mouse cursor is move inside the tag or element where it is applied. Similar to other events, we have to provide a function that will execute their process.

Syntax:

onPointerMove={function}

Parameter :

• function that will call once any click is detect from mouse.

Return type:

• event: It is an event object containing information about the event like target element and values

Example 1 : In this example, we implemented an area where the user will move their cursor, and that will fire the event, and the function passed to the event will give an alert that the pointer is moving.

Javascript

// App.js
import "./App.css"
const App = () => {
    const function1 = (event) => {
        alert("Pointer is Moving")
        console.log(event)
    }

    return (
        <div className="App">
            <h1>GeeksforGeeks</h1>
            <h2>Move Pointer inside the shaded region</h2>
            <div className="Shaded" onPointerMove={function1}>
            </div>
        </div>
    );
}
export default App;

CSS

/*App.css*/
.App {
    min-width: 30vw;
    margin: auto;
    text-align: center;
    color: green;
    font-size: 23px;
}

.Shaded {
    background-color: lightgray;
    height: 200px;
    width: 300px;
    margin: auto;
    border-radius: 6px;
}

Output:

Example 2: In this example, we implemented an area where users will move their cursor then there will be a event will fire and Pointer is moving will print in console.

Javascript

// App.js
import "./App.css"
const App = () => {
    const function1 = (event) => {
        console.log("Pointer is Moving")
    }
    return (
        <div className="App">
            <h1>GeeksforGeeks</h1>
            <h2>Move Pointer inside the shaded region</h2>
            <div className="Shaded" onPointerMove={function1}>
            </div>
        </div>
    );
}
export default App;

Output: