In React, how to detect if the mouse is hovering an element?

Question

const div_ref = useRef();

<div ref={div_ref} />

What are the properties of div_ref that I can use to find out if the mouse is hovering over div_ref?

Answer 1

You can use the onMouseEnter() listener in React to know when an element is being hovered with the mouse. For example, if you wanted to show a text in React when you hover over a heading (or any other element), you would use the following code:

import React, { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(false); // initiate it at false

  return (
    <div>
      <h2
        onMouseEnter={() => setVisible(true)}
        onMouseLeave={() => setVisible(false)}>
        Move Mouse Towards Me
      </h2>
      {visible && ( // you can use "&&" since there is no else in this case
        <div>Text to show</div>
      )}
    </div>
  );
}

export default App;