How to Handle the Mouse Hover Event in React
Tags: javascript, programming, react, softwaredevelopment
Published: 2024-01-19 21:15:50

Contrary to what you might think, there is no `onHover` event handler in React. This does not mean that React prevents you from dealing with the mouse hover event. On the contrary, React provides you with the `onMouseEnter` and `onMouseLeave` event handlers. These two can be used to implement mouse hover logic in React quite easily, and here you will learn everything you need to know to get started with them.

Follow this tutorial and learn how to achieve the desired result!

## onHover Event Handler in React

If you are familiar with jQuery, you should know the [`hover()`](https://api.jquery.com/hover/) function. This allows you to bind one or two handlers to one or more DOM elements. The first handler function is executed when the mouse pointer enters the selected DOM elements, while the second handler is executed when the mouse leaves the DOM elements.

Considering the naming conventions of event handlers in React, such as `onClick`, `onFocus`, and `onSubmit`, you might expect an `onHover` event handler. However, the HTML [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) specification does not include the hover event. Consequently, **the** **`onHover`** **event handler does not exist in React**.

So, if you want to implement hover logic in a React component on an HTML element, you have to look for the following states:

- The mouse enters the HTML element

- The mouse leaves the HTML element

This is exactly what jQuery does behind the scenes in the `hover()` function. Therefore, you can implement hover logic on an HTML element in React with the following two [mouse event](https://reactjs.org/docs/events.html#mouse-events) handlers:

- `onMouseEnter` → It calls the associated callback function when the mouse pointer is moved over the React HTML element.

- `onMouseLeave` → It calls the associated callback function when the mouse pointer is moved out of the React HTML element.

Let's now learn how to use them.

## Handling Mouse Hover With onMouseEnter and onMouseLeave in React

Let's look at how to handle the mouse hover event with an example. The most common example involves changing the style of an HTML element on mouse hover. However, this can be handled entirely in CSS and does not require React. So, this would not be a good example.

Here you will see an example of a component whose state changes based on the hover state. In detail, the `HoverableComponent` below shows or hides a message based on mouse hover over a `div`:

```javascript
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;
```

As you can see, achieving the desired result requires using the React state through the [`useState()`](https://reactjs.org/docs/hooks-state.html) hook. When the mouse enters the `div` element, the `onMouseEnter` event handler is called, the `showMessage` variable is set to `true`, and the "Hello, World!" message is shown. Conversely, when the mouse leaves the `div` element, the `onMouseLeave` event handler is called, the `showMessage` variable is set to `false`, and the "Hello, World!" message is hidden.

Thus, when hovering over the `div` HTML element, the `showMessage` boolean variable is updated and the message is shown or hidden accordingly. Notice that the `HoverableComponent` presented here is the same component used in the live demo you can find at the beginning of the article.

Et voilà! This is how to handle the mouse hover event in React.

### Conclusion

In this article, you learned that React does not come with the `onHover` event handler. This means that if you want to use deal with the mouse hover event in React, you need a special approach. In detail, you can easily implement hover logic with the `onMouseEnter` and `onMouseLeave` React event handler, and here you saw how to do it through a simple example.

Thanks for reading! I hope that you found this article helpful.
  
***
_The post "[How to Handle the Mouse Hover Event in React](https://writech.run/blog/how-to-handle-the-mouse-hover-event-in-react-32bad58f1a9/)" appeared first on [Writech](https://writech.run)._