useOnLongHover

About

useOnLongHover starts a timer on mouseenter and calls a callback if the pointer remains over the element for the full delay. useOnLongHoverRef is a supported alias of the same implementation.

Example

import { useState } from "react";
import { useOnLongHover } from "rooks";

export default function HoverPreview() {
  const [ready, setReady] = useState(false);
  const longHoverRef = useOnLongHover(() => setReady(true), { duration: 300 });

  return (
    <button ref={longHoverRef} onMouseLeave={() => setReady(false)}>
      {ready ? "Preview ready" : "Hover for 300 ms"}
    </button>
  );
}

Parameters

• callback: called once after a qualifying hover. The timer uses the latest callback.
• options.duration: delay in milliseconds; defaults to 300.

The option type is private and is shown inline rather than exported from the package.

Return value

The hook returns a callback ref that accepts an HTMLElement | null.

Behavior and lifecycle

A native mouseenter starts the timer. mouseleave, a duration change, target replacement, or unmount clears a pending timer. Remaining hovered after the callback fires does not repeatedly call it; leaving and entering again starts a new attempt. Native listeners are removed when the target changes or the component unmounts.

Compatibility and accessibility

The hook has no keyboard or touch equivalent. Do not make required information depend on a long hover; provide focus and explicit activation paths. The timer and listeners start only in the browser.

Related

• useOnHoverRef reports immediate mouse entry and exit.
• useOnLongPress handles timed mouse or touch presses.