import { useState } from "react" ; export interface UseHoverOptions { mouseEnterDelayMS ? : number ; mouseLeaveDelayMS ? : number ; } export type HoverProps = Pick < React . HTMLAttributes < HTMLElement > , "onMouseEnter" | "onMouseLeave" > ; export default function useHover ( { mouseEnterDelayMS = 0 , mouseLeaveDelayMS = 0 } = { } ) { const [ isHovering , setIsHovering ] = useState ( false ) ; let mouseEnterTimer ; let mouseOutTimer ; return [ isHovering , { onMouseEnter : ( ) => { clearTimeout ( mouseOutTimer ) ; mouseEnterTimer = setTimeout ( ( ) => setIsHovering ( true ) , mouseEnterDelayMS ) ; } , onMouseLeave : ( ) => { clearTimeout ( mouseEnterTimer ) ; mouseOutTimer = setTimeout ( ( ) => setIsHovering ( false ) , mouseLeaveDelayMS ) ; } } ] ; }