React - onHover event example

In this article, we would like to show you how to use onHover events in React.

In React there is no onHover event handler, to get the hover effect, we use the onMouseEnter and onMouseLeave events. When the mouse hovers over an element, onMouseEnter event will be triggered, and when the mouse leaves the element, it will be onMouseLeave event. 

Quick solution:

const [isHover, setIsHover] = React.useState(false);

<button 
    onMouseEnter={() => isHovered(true}}
    onMouseLeave={() => isHovered(false)}
>
    Hover over me!
</button>

Practical examples

In the example below, when we hover over the mouse, we call the onMouseEnter event and display the text.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";

const submitStyle = {
  margin: '5px auto',
  padding: '7px 10px',
  border: '1px solid rgb(239, 255, 255)',
  borderRadius: 3,
  background: 'rgb(48, 133, 214)',
  fontSize: 15,
  color: 'white',
  display: 'flex',
  cursor: 'pointer'
};

const textStyle = {
  fontFamily: 'Arial, Helvetica, sans-serif',
  fontSize: '15px'
}

const App = () => {
  const [displayed, setDisplayed] = React.useState(false);
  return (
    <div className="App">
      <button
        style={submitStyle}
        onMouseEnter={() => setDisplayed(true)}
        onMouseLeave={() => setDisplayed(false)}
      >
        Hover over me!
      </button>
      {displayed && (
        <div style={textStyle}>
          Text that will appear when you hover over the button.
        </div>
      )}
    </div>
  );
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Another example shows how the background color changes when you hover over the button element:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler. 
// import React from 'react'; 
// import ReactDOM from 'react-dom'; 

const App = () => {
    const [backgroundColor, setBackgroundColor] = React.useState("#ffffff");
    const appStyles = {
      	background: `${backgroundColor}`,
    };
    return (
      <div className="App" style={appStyles}>
        <button  
          onMouseEnter={() => setBackgroundColor('#0000ff')}
          onMouseLeave={() => setBackgroundColor('#ffffff')}
        >
          Blue 
        </button> 
      </div> 
    ); 
} 
const root = document.querySelector('#root'); 
ReactDOM.render(<App/>, root );