Contrary to common expectations, React does not provide an onHover event handler. However, this doesn't mean that React prevents you from managing mouse hover events. Instead, React offers the onMouseEnter and onMouseLeave event handlers for handling mouse hover-related interactions. In this article, we'll explore how to make use of these event handlers to create mouse hover logic in React.
The Absence of an onHover Event Handler in React
If you're familiar with jQuery, you might have used the [hover()](https://api.jquery.com/hover/) function. This function allows you to attach one or two handlers to one or more DOM elements. The first handler gets executed when the mouse pointer enters the selected DOM elements, and the second handler is triggered when the mouse leaves the DOM elements.
React adheres to a specific naming convention for event handlers, like onClick, onFocus, and onSubmit. Given this convention, one might naturally expect an onHover event handler. However, the HTML [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) specification does not include a hover event. Consequently, React does not provide an onHover event handler.
To implement hover logic in a React component for an HTML element, you'll need to watch for two distinct states:
- When the mouse enters the HTML element.
- When the mouse exits the HTML element.
This is precisely what jQuery accomplishes internally in the hover() function. Therefore, in React, you can implement hover logic on an HTML element using two mouse event handlers:
onMouseEnter: This handler invokes the associated callback function when the mouse pointer is positioned over the React HTML element.onMouseLeave: This handler triggers the associated callback function when the mouse pointer moves away from the React HTML element.
Now, let's dive into how to use these event handlers effectively.
Managing Mouse Hover with onMouseEnter and onMouseLeave in React
To illustrate how to handle the mouse hover event in React, let's consider an example. Although changing the style of an HTML element on hover is a common use case, it can typically be handled entirely through CSS without requiring React's involvement. Therefore, we'll demonstrate an example where a component's state changes based on the hover state. Specifically, the HoverableComponent below displays or hides a message when the mouse hovers over a div element:
import React, { useState } from "react";
import "./HoverableComponent.css";
function HoverableComponent() {
const [showMessage, setShowMessage] = useState(false);
return (
<>
<div
className="hoverableDiv"
onMouseEnter={() => {
setShowMessage(true);
}}
onMouseLeave={() => {
setShowMessage(false);
}}
>
Hover me!
</div>
{showMessage && <h1>Hello, World!</h1>}
</>
);
}
export default HoverableComponent;
In this example, achieving the desired outcome involves leveraging React's state management through the [useState()](https://reactjs.org/docs/hooks-state.html) hook. When the mouse pointer enters the div element, the onMouseEnter event handler is triggered, setting the showMessage variable to true and revealing the "Hello, World!" message. Conversely, when the mouse leaves the div element, the onMouseLeave event handler is invoked, setting the showMessage variable to false and hiding the message.
Thus, hovering over the div HTML element triggers updates to the showMessage boolean variable, resulting in the message being shown or hidden accordingly. It's important to note that the HoverableComponent demonstrated here is the same component used in the live demo featured at the beginning of this article.
That's how you handle the mouse hover event in React!
Conclusion
In this article, we've clarified that React does not include an onHover event handler. This means that to manage mouse hover events in React, you'll need to take a different approach. Specifically, you can effortlessly implement hover logic using the onMouseEnter and onMouseLeave event handlers provided by React. Through a straightforward example, you've seen how to achieve this.