DOM
useHover
Tracks whether the pointer is hovering an element.
Demo
live · imported from hookli
Hover this panel
- isHovered
- false
Hover state is pointer-only — pair it with focus styling so keyboard users get the same affordance.
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>
);
}Usage
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>
);
}API
useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): booleanParameters
| Name | Type | Default | Description |
|---|---|---|---|
| elementRef | RefObject<T> | — | Ref to the element whose hover state to track. mouseenter/mouseleave are attached to it and cleaned up automatically. |
Returns
| Name | Type | Description |
|---|---|---|
| isHovered | boolean | True while the pointer is over the element, false otherwise. Starts false on the server and until the first mouseenter. |
Hook
The implementation, straight from hookli. Copy it, or install the package.
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;
};