Component UI
useHoverui-interaction

useHover

NewSSR SAFE

Tracks hover state of a target element with optional delay.

$ pnpm dlx shadcn@latest add @byphongphan/use-hover
Requires @byphongphan in components.json
ui & interaction
Loading preview...

Installation

$ pnpm dlx shadcn@latest add @byphongphan/use-hover
Requires @byphongphan in components.json

Usage

import { useHover } from "@/shared/hooks"
export function HoverCard() {  const [hoverRef, isHovered] = useHover<HTMLDivElement>({    enterDelay: 200,    leaveDelay: 200,  })
  return (    <div      ref={hoverRef}      className={`p-6 rounded-xl border transition-colors ${        isHovered ? "border-primary bg-primary/10" : "border-border bg-card"      }`}    >      <p>{isHovered ? "Hovered!" : "Hover over me"}</p>    </div>  )}

Props & Parameters

ParamTypeDefaultDescription
options.enterDelaynumber0Delay in milliseconds before triggering hover on state (true).
options.leaveDelaynumber0Delay in milliseconds before triggering hover off state (false).
options.onEnter(event: PointerEvent) => void—Callback invoked when the pointer enters the element.
options.onLeave(event: PointerEvent) => void—Callback invoked when the pointer leaves the element.
options.enabledbooleantrueWhether the hover event listener is active.
options.refRefObject<T | null>—Optional external ref to attach to instead of the returned ref.

Returns

Return ValueTypeDescription
[0] (ref)RefObject<T | null>Ref object to attach to the target DOM element.
[1] (isHovered)booleanCurrent hover status of the target element.

Command Palette

Quick search and commands navigation