useHover

The useHover hook allows you to detect when a user's mouse is over a specific element. It returns a ref that depends on the element you want to track, and a boolean isHovered state.

Demo

Hover Me!

State: false

Source Code

Copy this code into src/hooks/useHover.ts:

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

export const useHover = <T extends HTMLElement>() => {
  const [isHovered, setIsHovered] = useState(false);
  const ref = useRef<T | null>(null);

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

    const handleMouseEnter = () => setIsHovered(true);
    const handleMouseLeave = () => setIsHovered(false);

    element.addEventListener('mouseenter', handleMouseEnter);
    element.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      element.removeEventListener('mouseenter', handleMouseEnter);
      element.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  return { ref, isHovered };
};

Usage

import { useHover } from '@/hooks/useHover';

const HoverCard = () => {
  const { ref, isHovered } = useHover<HTMLDivElement>();

  return (
    <div
      ref={ref}
      style={{
        backgroundColor: isHovered ? 'blue' : 'gray',
        color: 'white',
        padding: '20px',
      }}
    >
      {isHovered ? 'Get off me!' : 'Hover me!'}
    </div>
  );
};

API Reference

Return Value

Property	Type	Description
`ref`	`RefObject<T>`	A React ref to attach to the target element.
`isHovered`	`boolean`	`true` if the element is being hovered, `false` otherwise.