use-hovering

July 11, 2026 · View on GitHub

Track whether a React element is hovered or focused, with optional enter and exit delays and no runtime dependencies.

Installation

npm install use-hovering

Other package managers:

yarn add use-hovering
pnpm add use-hovering
bun add use-hovering

Usage

import * as React from "react";
import { useHovering } from "use-hovering";

export function Example() {
  const firstRef = React.useRef(null);
  const secondRef = React.useRef(null);
  const firstHovering = useHovering(firstRef);
  const secondHovering = useHovering(secondRef, {
    enterDelay: 500,
    exitDelay: 100,
  });

  return (
    <>
      <div ref={firstRef} tabIndex={0}>
        HOVER OVER ME 1{firstHovering && <span> HOVERING</span>}
      </div>
      <div ref={secondRef} tabIndex={0}>
        HOVER OVER ME 2{secondHovering && <span> HOVERING</span>}
      </div>
    </>
  );
}