useHover()

The useHover() hook simplifies tracking the hover state of DOM elements. It uses a callback ref to attach listeners, ensuring it works seamlessly even if elements are conditionally rendered.

Import

typescript

import { useHover } from 'the-react-hooks';

Usage

✋

Hover me(Mouse Left)

Status:false

Component.tsx

import { useHover } from 'the-react-hooks';

export const Component = () => {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? 'I am hovered! ✨' : 'Hover me 👋'}
    </div>
  );
}

API

Arguments

This hook does not accept any arguments.

Returns

Returns a tuple (array) containing:

[0] ref – (node: T | null) => void A callback ref function that you must pass to the ref prop of the element you want to track.
[1] isHovered – boolean True if the mouse is currently over the element, false otherwise.

PrevioususeHistory NextuseIdle