useHover()

useHover<T>(element): boolean

Defined in: hooks/dom/useHover.ts:29

A custom React hook to track whether a referenced element is being hovered.

Type Parameters

T

T extends HTMLElement = HTMLElement

Parameters

element

RefObject<T>

A React ref object pointing to the target element.

Returns

boolean

isHovered - Whether the element is currently being hovered.

Example

import { useRef } from 'react';
import { useHover } from '@zl-asica/react';

const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const isHovered = useHover(ref);

  return (
    <div ref={ref} style={{ backgroundColor: isHovered ? 'blue' : 'gray' }}>
      Hover me!
    </div>
  );
};