Function usePointerHover

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

This hook listens for pointerenter and pointerleave events on the specified element and updates the isHovered state accordingly. It returns a boolean value indicating whether the pointer is currently hovering over the element.

Example

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

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