useHover

Events & gestures

A powerful React hook for detecting hover state on elements with delay support

Install

$ npm install @usefy/use-hover

Quick start

useHover.tsx

import { useHover } from "@usefy/use-hover";

function MyComponent() {
  const { ref, isHovered } = useHover<HTMLDivElement>();

  return (
    <div ref={ref} style={{ background: isHovered ? "lightblue" : "white" }}>
      {isHovered ? "Hovering!" : "Hover me"}
    </div>
  );
}

API reference

`useHover<T>(options?)`

A hook that detects hover state on elements using mouseenter/mouseleave events.

Type Parameter

Parameter	Constraint	Default	Description
`T`	`Element`	`HTMLElement`	The type of element to attach to

Parameters

Parameter	Type	Description
`options`	`UseHoverOptions`	Optional configuration object

Options

Option	Type	Default	Description
`enabled`	`boolean`	`true`	Enable/disable hover detection. When false, isHovered is always false
`delay`	`number \| { enter?: number; leave?: number }`	`0`	Delay in ms before hover state changes. Can be separate for enter/leave
`onChange`	`(isHovered: boolean, event?: MouseEvent \| TouchEvent) => void`	—	Callback fired when hover state changes
`initialHovered`	`boolean`	`false`	Initial hover state (useful for SSR)
`detectTouch`	`boolean`	`false`	Whether to detect touch events (touchstart/touchend) for hybrid devices

Returns `UseHoverReturn<T>`

Property	Type	Description
`ref`	`(node: T \| null) => void`	Callback ref to attach to the target element
`isHovered`	`boolean`	Whether the element is currently being hovered

The return value also supports tuple destructuring via Symbol.iterator:

const [ref, isHovered] = useHover();

Go deeper

This page is the quick reference. For every example, prop, and edge case, read the full README — or open Storybook to change props live.

Full README →Open in Storybook →