Languages
[Edit]
EN

React - onHover event example

3 points
Created by:
Dirask JS Member
3430

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

onHover event example
onHover event example

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 );

ReactJS

React - onHover event example
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join