React onMouseMove Event Last Updated : 22 Apr, 2025 Summarize Comments Improve Suggest changes Share Like Article Like Report React onMouseMove event detects a mouse movement over an element. The event triggers when the mouse pointer moves while positioned over an element. It is particularly useful where you want to track and respond to the movement of the user's cursor.It is similar to the HTML DOM onmousemove event but uses the camelCase convention in React.Syntax:<element onMouseMove={function}/>Parameter: The parameter for the onMouseEnter event handler is a function that contains the action to be taken when the mouse moves within the element. Return type: The return type of the function attached to onMouseEnter is usually void because it doesn't explicitly return anything, but it can perform actions, update state, or trigger other functions as needed within the component.Example 1 : This example demonstrates the use of the onMouseMove event handler. JavaScript //App.js import React from 'react'; class App extends React.Component { handleMouseMove = (event) => { console.log('Mouse position:', event.clientX, event.clientY); // Additional logic }; render() { return ( <div onMouseMove={this.handleMouseMove}> <p>Move your mouse and click over this area.</p> </div> ); } } export default App; Output: Example 2 : This example demonstrates the canvas drawing with the help of onMouseMove event handler. JavaScript // App.js import React, { useState } from "react"; const App = () => { const [isDrawing, setIsDrawing] = useState(false); const [prevX, setPrevX] = useState(0); const [prevY, setPrevY] = useState(0); const handleMouseDown = (event) => { setIsDrawing(true); setPrevX(event.nativeEvent.offsetX); setPrevY(event.nativeEvent.offsetY); }; const handleMouseUp = () => { setIsDrawing(false); }; const handleMouseMove = (event) => { if (isDrawing) { const canvas = event.target; const context = canvas.getContext("2d"); const x = event.nativeEvent.offsetX; const y = event.nativeEvent.offsetY; context.strokeStyle = "black"; context.lineWidth = 2; context.beginPath(); context.moveTo(prevX, prevY); context.lineTo(x, y); context.stroke(); setPrevX(x); setPrevY(y); } }; return ( <div> <h2>Simple Drawing App</h2> <canvas width="400" height="300" style={{ border: "1px solid black" }} onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} > Your browser does not support the canvas element. </canvas> </div> ); }; export default App; Output: Comment More infoAdvertise with us Next Article React onMouseDown Event S souravsharma098 Follow Improve Article Tags : Web Technologies ReactJS React Events Similar Reads React onMouseDown Event The onMouseDown event is a native DOM event in React that triggers when the mouse button is pressed down on an element. It is part of a set of mouse events that React and the DOM handle, which includes events like onClick, onMouseUp, onMouseEnter, and others.onMouseDown occurs when any mouse button 5 min read React onTouchMove Event React onTouchMove event fires when the user touches and moves the cursor. Similar to other elements in it, we have to pass a function for process execution.It is similar to the HTML DOM ontouchmove event but uses the camelCase convention in React.Syntax:onTouchMove={function}Parameter : function tha 2 min read React onMouseUp Event React onMouseUp event is used to detect when a mouse button is released over an element. It triggers when the user releases a mouse button while the cursor is over an element. It is particularly useful where you want to detect the ending of a mouse click or drag operation. It is similar to the HTML 2 min read React onMouseEnter Event React onMouseEnter() is an event handler that triggers when the mouse cursor enters the boundaries of an element. It is particularly useful where you want to initiate actions or display information when the user's cursor hovers over an element. It is similar to the HTML DOM onmouseenter event but us 2 min read React onPointerMove Event The onPointerMove event in React fires whenever the cursor moves inside the tag or element where the event has been applied. Similar to other events, the onPointerMove takes a function which defines the process/task which has to be applied.Syntax:onPointerMove={function}Parameter : function: The fun 2 min read React onFocus event The onFocus event in React is triggered when an element receives focus, meaning it becomes the active element that can accept user input. This event is commonly used to execute functions or perform actions when an element gains focus. It is similar to the HTML DOM onfocus event but uses the camelCas 2 min read Like