typescriptbeginner

useHover Hook

Tracks whether an element is being hovered using mouse enter/leave events with a ref.

typescriptPress ⌘/Ctrl + Shift + C to copy

import { useState, useRef, useEffect, RefObject } from 'react';

export function useHover<T extends HTMLElement>(): [RefObject<T | null>, boolean] {
  const [hovered, setHovered] = useState(false);
  const ref = useRef<T | null>(null);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;

    const handleEnter = () => setHovered(true);
    const handleLeave = () => setHovered(false);

    node.addEventListener('mouseenter', handleEnter);
    node.addEventListener('mouseleave', handleLeave);

    return () => {
      node.removeEventListener('mouseenter', handleEnter);
      node.removeEventListener('mouseleave', handleLeave);
    };
  }, []);

  return [ref, hovered];
}