ReactでonHoverイベントを制御する

はじめに

個人開発で作成してるChrome拡張のTabTabTabはReactで作成しており、要素へのマウスホバーに応じて表示・非表示を切り替えるという実装をしている箇所がある。

しかし、ReactにはonHoverというイベントハンドラはなく、たまに実装を忘れてしまうので残しておく。

実装方法

上にも書いたがReactにonHoverというイベントハンドラはない。代わりにonMouseEnterとonMouseLeaveというイベントハンドラを利用して同様の機能を実装する。

• onMouseEnter: 要素上にマウスカーソルが入った際に発火するイベントハンドラ
• onMouseLeave: 要素上からマウスカーソルが出て行った際に発火するイベントハンドラ

それぞれのイベントが発火した際に状態を更新すると良い。

const Sample = () => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {isHovered ? "Hovered!" : "Not Hovered!"}
    </div>
  );
};

おわり

onMouseEnterやonMouseLeave以外のイベントについては以下のページにまとめられている。ざっと見ておくと良いかもしれない。

Common components (e.g. <div>) – React</div>

The library for web and native user interfaces

react.dev