useHoverIntent

Trigger hover logic only when the user intentionally hovers (after a delay).

✅ Features

Delayed hover detection
Smarter UX, avoids flickers
Configurable timeout

📦 Usage

1import { useHoverIntent } from './useHoverIntent';
2
3const ref = useRef(null);
4const isHovered = useHoverIntent({ ref, delay: 150 });
5
6return <div ref={ref}>{isHovered ? "Hovered!" : "Hover me slowly"}</div>;

📋 Source Code

This is the full implementation of useHoverIntent

1import { useEffect, useRef, useState, RefObject } from 'react';
2
3interface HoverIntentOptions {
4  ref: RefObject<HTMLElement>;
5  delay?: number;
6}
7
8export function useHoverIntent({ ref, delay = 100 }: HoverIntentOptions) {
9  const [hovered, setHovered] = useState(false);
10  const timeout = useRef<NodeJS.Timeout | null>(null);
11
12  useEffect(() => {
13    const el = ref.current;
14    if (!el) return;
15
16    const handleEnter = () => {
17      timeout.current = setTimeout(() => setHovered(true), delay);
18    };
19    const handleLeave = () => {
20      if (timeout.current) clearTimeout(timeout.current);
21      setHovered(false);
22    };
23
24    el.addEventListener('mouseenter', handleEnter);
25    el.addEventListener('mouseleave', handleLeave);
26
27    return () => {
28      el.removeEventListener('mouseenter', handleEnter);
29      el.removeEventListener('mouseleave', handleLeave);
30    };
31  }, [ref, delay]);
32
33  return hovered;
34}
35