Function useHover

Custom React hook for detecting hover state over a referenced element.

This hook listens for mouseenter and mouseleave events on the specified element and updates the isHovered state accordingly. It returns a boolean value indicating whether the element is currently being hovered over.

Example

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

  return (
    <div ref={ref} style={{ background: isHovered ? 'lightblue' : 'lightgray' }}>
      {isHovered ? 'Hovering!' : 'Hover over me!'}
    </div>
  );
};