A React hook that determines if the mouse is hovering an element.

npm i @utilityjs/use-hover | yarn add @utilityjs/use-hover

Usage

const App: React.FC = () => {
  const { isHovered, registerRef } = useHover();

  return (
    <div className="app">
      <div ref={registerRef}>
        {`The current div is ${isHovered ? `hovered` : `unhovered`}`}
      </div>
    </div>
  );
};

API

useHover()

declare const useHover: () => {
  isHovered: boolean;
  setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
  registerRef: <T extends HTMLElement>(node: T | null) => void;
};