# useHover

> Tracks whether the pointer is hovering an element.

- Category: DOM
- Package: `hookli` (install with `npm i hookli`)
- Docs: https://hookli.vercel.app/docs/use-hover

## Signature

```ts
useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): boolean
```

## Parameters

- `elementRef`: `RefObject<T>` — Ref to the element whose hover state to track. mouseenter/mouseleave are attached to it and cleaned up automatically.

## Returns

- `isHovered`: `boolean` — True while the pointer is over the element, false otherwise. Starts false on the server and until the first mouseenter.

## Usage

```tsx
import { useRef } from "react";
import { useHover } from "hookli";

export function Demo() {
  const boxRef = useRef<HTMLDivElement>(null);
  const isHovered = useHover(boxRef);

  return (
    <div ref={boxRef}>
      {isHovered ? "Pointer is over me" : "Hover this panel"}
    </div>
  );
}
```

## Source

`src/hooks/use-hover/use-hover.ts`

```ts
import { RefObject, useState } from "react";
import { useEventListener } from "../use-event-listener/use-event-listener";

export const useHover = <T extends HTMLElement = HTMLElement>(
  elementRef: RefObject<T>,
): boolean => {
  const [isHovered, setIsHovered] = useState(false);

  useEventListener("mouseenter", () => setIsHovered(true), elementRef);
  useEventListener("mouseleave", () => setIsHovered(false), elementRef);

  return isHovered;
};
```