useHover() hook in React

Any reusable logic that involves a React hook can be encapsulated and created a custom hook.

Following this principle I am here with another custom hook useHover() that takes an element reference as input and checks if that element is being hovered or not.

Hovering is a combination of two different events, mouse-enter and mouse-leave, where if the mouse enters on the element area or is over it that means we are hovering the mouse over the element, where as if it is not, that is mouse has left from the elements area that means it is not being hovered anymore.

This logic can now be converted to the code, where we will take the element reference as an input in the hook and assign the event listener to it listen to the mouse-enter and mouse-leave events.

When the event mouse-enter is fired, we will update the state that the element is currently being hovered, when the mouse-leave event is fired we will update the state the element is not being hovered.

This events will be assigned when the components mount and will be removed when the component unmounts inside the useEffect() hook.

import { useEffect, useState } from "react";

export const useHover = (documentRef) => {
  const [isHover, setIsHovered] = useState(false);

  const onMouseEnter = () => {
    setIsHovered(true);
  };

  const onMouseLeave = () => {
    setIsHovered(false);
  };

  useEffect(() => {
    documentRef.current?.addEventListener("mouseenter", onMouseEnter);
    documentRef.current?.addEventListener("mouseleave", onMouseLeave);

    return () => {
      documentRef.current?.removeEventListener("mouseenter", onMouseEnter);
      documentRef.current?.addEventListener("mouseleave", onMouseLeave);
    };
  }, [documentRef.current]);

  return isHover;
};

Testcase

import "./styles.css";
import { useRef } from "react";
import { useHover } from "./useHover";

export default function App() {
  const ref = useRef(null);
  const isHover = useHover(ref);
  return (
    <div className="App">
      <h1>Hello Learnersbucket</h1>
      <h2 ref={ref}>Check hovering: {isHover ? "true" : "false"}</h2>
    </div>
  );
}