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.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

How to Handle Hover Events in React

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Quick Guide To The render() Method in React

How To Get Key Clicked Element in React

How to Pass A Function via Props in React

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

A Quick Guide To The render() Method in React

How To Get Key Clicked Element in React

How to Pass A Function via Props in React

10 Useful JavaScript Functions to Learn

100+ FREE Resources to Learn Full Stack Web Development

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps