useHover

A hook that tracks whether the element is being hovered.

Overview

A hook that tracks whether the element is being hovered.

Documentation and Examples

Installation

pnpm dlx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHover.json

npx shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHover.json

yarn shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHover.json

bun shadcn@latest add https://shadcn-ahooks.vercel.app/r/useHover.json

A hook that tracks whether the element is being hovered.

Examples

Default usage

Pass in DOM element

API

const isHovering = useHover(
  target,
  {
   onEnter,
   onLeave,
   onChange
  }
);

Params

| Property | Description | Type | Default | | -- | | | - | - | | onEnter | Callback to be executed on mouse hover | () => void | - | | onLeave | Callback to be executed on mouse leave | () => void | - | | onChange | Callback to be executed on hover change | (isHovering: boolean) => void | - |

Result

| Property | Description | Type | | | | isHovering | Whether the element is being hovered | boolean |

useHistoryTravel

A hook to manage state change history. It provides encapsulation methods to travel through the history.

useInViewport

Observe whether the element is in the visible area, and the visible area ratio of the element. More information refer to [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

On this page

Overview Installation Examples Default usage Pass in DOM element API Params Result