React useHover Hook

Ever tried to track hover states in React and ended up with a mess of onMouseEnter/onMouseLeave event handlers scattered everywhere? You know the drill—manually managing boolean state, dealing with event bubbling issues, forgetting cleanup on unmount. This free open source React useHover custom hook handles all that hover detection boilerplate so you can focus on building interactive UIs instead of wrestling with mouse event logic in your React applications.

useHover showcase

Simple hover state detection with automatic event handling:

"use client";import * as React from "react";import { toast } from "sonner";import { Badge } from "@/components/ui/badge";import { Label } from "@/components/ui/label";import { useHover } from "@/components/ui/shadcn-io/use-hover";export default function UseHoverDemo() {  const hoverRef = React.useRef<HTMLDivElement>(null);  const isHovered = useHover(hoverRef as React.RefObject<HTMLElement>);  React.useEffect(() => {    if (isHovered) {      toast.info("Hovering! 🎯", {        description: "Mouse entered the hover area",      });    }  }, [isHovered]);  return (    <div className="p-6 max-w-sm mx-auto space-y-6">      {/* Header */}      <div className="text-center space-y-2">        <h3 className="text-lg font-semibold">Hover Demo</h3>        <p className="text-sm text-muted-foreground">Hover detection with automatic cleanup</p>      </div>            {/* Hover Status */}      <div className="space-y-2">        <Label className="text-sm font-medium">Hover State</Label>        <div className="bg-muted rounded p-3 min-h-[48px] flex items-center justify-center">          <Badge variant={isHovered ? "default" : "secondary"} className="text-lg px-4 py-2">            {isHovered ? "Hovering" : "Not Hovering"}          </Badge>        </div>      </div>      {/* Hover Target */}      <div className="space-y-2">        <Label className="text-sm font-medium">Hover Area</Label>        <div           ref={hoverRef}          className={`rounded-lg min-h-[80px] flex items-center justify-center transition-all duration-200 cursor-pointer ${            isHovered              ? "bg-primary/20 border-2 border-primary"               : "bg-muted border-2 border-muted"          }`}        >          <p className="text-sm text-center">            {isHovered ? "✨ Hovering detected!" : "👆 Hover over me"}          </p>        </div>      </div>      {/* Instructions */}      <div className="text-center min-h-[20px] flex items-center justify-center">        <div className="text-xs text-muted-foreground">          Move your mouse over the area above        </div>      </div>    </div>  );}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const badgeVariants = cva(  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",  {    variants: {      variant: {        default:          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",        secondary:          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",        destructive:          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",      },    },    defaultVariants: {      variant: "default",    },  })function Badge({  className,  variant,  asChild = false,  ...props}: React.ComponentProps<"span"> &  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {  const Comp = asChild ? Slot : "span"  return (    <Comp      data-slot="badge"      className={cn(badgeVariants({ variant }), className)}      {...props}    />  )}export { Badge, badgeVariants }

This free open source React hook simplifies hover interactions with TypeScript support for modern JavaScript applications. Whether you're building tooltips, button states, or interactive galleries in your Next.js projects, this React hook keeps your hover logic clean.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

npx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

bunx shadcn@latest add https://www.shadcn.io/registry/use-hover.json

Why most hover implementations suck

Look, you could keep writing onMouseEnter and onMouseLeave handlers for every element. But then you hit the edge cases—event bubbling, ref management, cleanup on unmount, TypeScript typing issues. Before you know it, you're copying the same hover logic across components.

Most developers scatter onMouseEnter/onMouseLeave handlers throughout their components without proper cleanup, causing memory leaks in React applications. Or they use mouseover/mouseout events that bubble unpredictably, triggering false hover states when child elements are involved. Some forget to handle component unmounting and leave orphaned event listeners in TypeScript components.

This React hook handles all the tricky parts—proper event delegation, ref validation, and automatic cleanup in Next.js projects. No more inline event handlers or forgotten mouseLeave events.

Plus it's just cleaner. Instead of managing hover state and event handlers manually, you pass a ref to the React hook and get back a boolean. Simple.

This free open source React hook handles the repetitive mouse event logic while you focus on building features. Whether you're creating React applications, Next.js interfaces, or TypeScript components, reliable hover detection keeps your JavaScript development smooth.

Features

• Hover state detection with mouseenter/mouseleave event handling in React applications
• Ref-based targeting allowing hover tracking on any DOM element in TypeScript components
• TypeScript support with generic element types and complete type definitions for Next.js projects
• Performance optimized using event delegation and proper cleanup in JavaScript development
• Zero dependencies lightweight implementation with just React hooks for modern frameworks
• Automatic cleanup handles event removal when component unmounts in React applications
• Free open source designed for modern React development workflows

When you'll actually use this

Real talk—this isn't for every hover interaction in React applications. CSS :hover works fine for simple style changes. But when you need hover state in your React component logic, this React hook keeps things organized in Next.js projects.

Perfect for:

• Interactive tooltips - Show/hide content based on hover state built with TypeScript
• Button feedback - Visual states and loading indicators on hover using React patterns
• Image galleries - Preview overlays and zoom triggers in JavaScript applications
• Navigation menus - Dropdown visibility and submenu logic in React components
• Card interfaces - Hover effects and action button reveals in Next.js applications
• Data visualization - Chart point highlighting and detail panels using TypeScript integration

API Reference

useHover

Return Value

Type Parameters

Common gotchas

Valid ref requirement: The React hook returns false if the ref is null or undefined in TypeScript components, so make sure your ref is properly attached to a DOM element in React applications.

Event type selection matters: Uses mouseenter/mouseleave events that don't bubble like mouseover/mouseout in Next.js projects, which prevents issues with child elements triggering hover changes unexpectedly.

Automatic cleanup handling: Event listeners are removed when the component unmounts or the ref changes in JavaScript development, so you don't need to worry about memory leaks.

TypeScript generic benefits: The React hook accepts a generic type parameter for better type safety with specific HTML element types in TypeScript projects.

Mobile device limitations: Mobile devices don't have hover states in React applications. The hook always returns false on touch devices, so consider alternative interactions for mobile users.

Element visibility requirements: Zero-height or hidden elements can't be hovered in Next.js applications. Make sure your target elements have visible dimensions.

Related hooks you will also like

Questions you might have