paint-brush
How to Handle Hover Events in Reactby@iraklitch
52,926 reads
52,926 reads

How to Handle Hover Events in React

by Irakli Tchigladze
Irakli Tchigladze HackerNoon profile picture

Irakli Tchigladze

@iraklitch

Former front-end developer, and current writer who loves to help...

2 min readJanuary 8th, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

In this guide, you will see how to handle hover events, one of the most common user interactions in web apps.

Company Mentioned

Mention Thumbnail
Augmentastic || Augmented Reality
featured image - How to Handle Hover Events in React
1x
Read by Dr. One voice-avatar

Listen to this story

Irakli Tchigladze HackerNoon profile picture
Irakli Tchigladze

Irakli Tchigladze

@iraklitch

Former front-end developer, and current writer who loves to help people understand difficult technical concepts.

0-item
1-item

STORY’S CREDIBILITY

Guide

Guide

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

Code License

Code License

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

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 onHover event, but there is a way to handle hovering events in React.


To implement this feature, you need two event handlers - onMouseEnter to handle the when the mouse enters borders of the element, and onMouseLeave to handle when the mouse leaves. Handling these two events ensures that hover event handler works consistently.


Now let’s explore potential use-cases for onHover in React.


In our first example, let’s set onMouseEnter and onMouseLeave handlers to show or hide a component when user hovers over the element.


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 hidden , and its value is a boolean. Inside JSX, we look at the boolean value to conditionally render a header that says ‘Hovering’.


onMouseEnter and onMouseLeave event handlers are set on a div. onMouseEnter event sets hidden to false, so the header text appears. onMouseLeave sets it to true, so when the mouse leaves the div, the header text hides again.


Here’s a

to illustrate how onMouseEnter and onMouseLeave can replicate an onHover event handler in React.


-


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 React guides with examples.

onHover to Conditionally Style Elements in React

Similar to conditional rendering, you canuse onMouseEnter and onMouseLeave event handlers to conditionally style elements in React.


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, onMouseEnter and onMouseLeave event handlers update warning state variable. Which we use to change color of the text in the container.


You can also think of this as a programmatic alternative to using the :hover selector in CSS.

L O A D I N G
. . . comments & more!

About Author

Irakli Tchigladze HackerNoon profile picture
Irakli Tchigladze@iraklitch
Former front-end developer, and current writer who loves to help people understand difficult technical concepts.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Coffee-web
Bronxnyfw
Happytail
Hotelposadalamision
Carinsurancequotesopt
Jobmax6
1domainguru
Inthelowlands
Sutherlandharpsichords
1domainguru
Bezdiety
Sutherlandharpsichords

Mentioned in this story

X REMOVE AD