useHover

UI/Interaction

A React hook that detects when an element is being hovered over with support for both internal and external ref management.

Installation

npm install @thibault.sh/hooks

API Reference

Signature

function useHover<T extends HTMLElement>(
  _ref?: RefObject<T | null> | null
): [RefObject<T>, boolean]

Parameters

NameTypeDescriptionDefault
_ref
optional
RefObject<T | null> | null
Optional React ref object for the element to monitor. If not provided, the hook creates its own ref.-

Returns

[RefObject<T>, boolean]

A tuple containing the ref object and hover state.

Properties:

PropertyTypeDescription
ref
RefObject<T>
React ref object to attach to the target element.
isHovered
boolean
Boolean indicating whether the element is currently being hovered.
useHover Hook - React Hover State Detection