1import { useState, useRef, useEffect } from "react";
2
3export function useHover<T extends HTMLElement = HTMLElement>() {
4 const [value, setValue] = useState(false);
5 const ref = useRef<T>(null);
6
7 const handleMouseOver = () => setValue(true);
8 const handleMouseOut = () => setValue(false);
9
10 useEffect(() => {
11 const node = ref.current;
12 if (node) {
13 node.addEventListener("mouseover", handleMouseOver);
14 node.addEventListener("mouseout", handleMouseOut);
15
16 return () => {
17 node.removeEventListener("mouseover", handleMouseOver);
18 node.removeEventListener("mouseout", handleMouseOut);
19 };
20 }
21 }, [ref.current]);
22
23 return [ref, value] as const;
24}