How to Show a Button on Mouse Enter with React?

Sometimes, we want to show a button on mouse enter with React.

In this article, we’ll look at how to show a button on mouse enter with React.

Show a Button on Mouse Enter with React

To show a button on mouse enter with React, we can set the onMouseEnter and onMouseLeave props to state change functions that determine when the button is shown.

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [isMouseInside, setIsMouseInside] = useState();

  return (
    <div
      style={{ width: 200, height: 200 }}
      onMouseEnter={() => setIsMouseInside(true)}
      onMouseLeave={() => setIsMouseInside(false)}
    >
      {isMouseInside ? <button>Your Button</button> : null}
    </div>
  );
}

to create the isMouseInside state with the useState hook that determines when the button is shown.

Then we set the onMouseEnter prop to a function that calls setIsMouseInside with true to set isMouseInside to true .

Likewise, we set the onMouseLeave prop to a function that calls setIsMouseInside with false to set isMouseInside to false.

Then we only show the button when isMouseInside is true by writing:

{isMouseInside ? <button>Your Button</button> : null}

Conclusion

To show a button on mouse enter with React, we can set the onMouseEnter and onMouseLeave props to state change functions that determine when the button is shown.