In this guide, you will see how to handle hover events, one of the most common user interactions in web apps. onHover in React The library does not have built-in event, but there is a way to handle hovering events in React. onHover To implement this feature, you need two event handlers - to handle the when the mouse enters borders of the element, and to handle when the mouse leaves. Handling these two events ensures that hover event handler works consistently. onMouseEnter onMouseLeave Now let’s explore potential use-cases for onHover in React. In our first example, let’s set and handlers to show or hide a component when user hovers over the element. onMouseEnter onMouseLeave function App() {
  const [hidden, setHidden] = useState(true);
  return (
    <div
      className="container"
      onMouseEnter={() => setHidden(false)}
      onMouseLeave={() => setHidden(true)}
    >
      {hidden ? null : <h1>Hovering</h1>}
    </div>
  );
} In this example, we have a state variable , and its value is a boolean. Inside JSX, we look at the boolean value to conditionally render a header that says ‘Hovering’. hidden and event handlers are set on a div. event sets to , so the header text appears. sets it to , so when the mouse leaves the , the header text hides again. onMouseEnter onMouseLeave onMouseEnter hidden false onMouseLeave true div Here’s a to illustrate how and can replicate an event handler in React. live demo onMouseEnter onMouseLeave onHover - As you can see, the hovering effect activates even if your mouse is on the element’s border. If you liked this guide, SimpleFrontEnd blog has many similar with examples. React guides onHover to Conditionally Style Elements in React Similar to conditional rendering, you canuse and event handlers to conditionally style elements in React. onMouseEnter onMouseLeave To be more specific, event handlers update the state, which we can use to conditionally apply styles in JSX. function App() {
  const [warning, setWarning] = useState(true);
  return (
    <div
      className="container"
      onMouseEnter={() => setWarning(false)}
      onMouseLeave={() => setWarning(true)}
    >
      <h1 style={{ color: warning ? "goldenrod" : "green" }}>
        Please hover over the container{" "}
      </h1>
    </div>
  );
} In this example, and event handlers update state variable. Which we use to change color of the text in the container. onMouseEnter onMouseLeave warning You can also think of this as a programmatic alternative to using the :hover selector in CSS.

Too Long; Didn't Read

Making security fun one episode at a time

How to Handle Hover Events in React

Too Long; Didn't Read

Irakli Tchigladze

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Handle Hover Events in React

Too Long; Didn't Read

Irakli Tchigladze

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES