Skip to content

Instantly share code, notes, and snippets.

@MurkyMeow
Last active February 20, 2024 13:52
Show Gist options
  • Save MurkyMeow/2d0f3cdd1a9034dcc1d9b8348799a6e2 to your computer and use it in GitHub Desktop.
Save MurkyMeow/2d0f3cdd1a9034dcc1d9b8348799a6e2 to your computer and use it in GitHub Desktop.
useHover react hook
export const Component = () => {
const servicesRef = useRef<HTMLAnchorElement>(null);
const isServicesHovered = useHover(servicesRef);
return (
<Popover.Root open={isServicesHovered}>
<Popover.Trigger asChild>
<Link href="/" ref={servicesRef}>
Services
</Link>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content>
<NavbarServicesDropdown />
</Popover.Content>
</Popover.Portal>
</Popover.Root>
);
};
import { RefObject, useEffect, useState } from "react";
export function useHover<T extends HTMLElement = HTMLElement>(
elementRef: RefObject<T>,
): boolean {
const [value, setValue] = useState(false);
useEffect(() => {
const element = elementRef.current;
if (!element) return;
const handleMouseEnter = () => setValue(true);
const handleMouseLeave = () => setValue(false);
element.addEventListener("mouseenter", handleMouseEnter);
element.addEventListener("mouseleave", handleMouseLeave);
document.addEventListener("mouseleave", handleMouseLeave);
return () => {
element.removeEventListener("mouseenter", handleMouseEnter);
element.removeEventListener("mouseleave", handleMouseLeave);
document.removeEventListener("mouseleave", handleMouseLeave);
};
}, [elementRef]);
return value;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment