useHover

Tracks whether a target is hovered.

Import

import { useHover } from '@kamod-ch/hooks'

Live demo

Basic demo

Tracks whether a target is hovered.

Browser-only demo

This demo starts after the page mounts in the browser.

import { useRef } from 'preact/hooks'
import { useHover } from '@kamod-ch/hooks'

export default function UseHoverDemo() {
  const ref = useRef<HTMLDivElement>(null)
  const hovering = useHover(ref)

  return (
    <div>
      <div ref={ref} class="demo-target-box">Hover this area</div>
      <p><strong>Hovering:</strong> {String(hovering)}</p>
    </div>
  )
}

API

TypeScript signature

import type { BasicTarget } from '../utils/domTarget.js';
export interface Options {
    onEnter?: () => void;
    onLeave?: () => void;
    onChange?: (isHovering: boolean) => void;
}
declare const _default: (target: BasicTarget, options?: Options) => boolean;
export default _default;
/

SSR considerations

This hook touches browser APIs. Render it after mount or guard it with BrowserOnly in SSR and static builds.

Browser compatibility

Requires the corresponding browser API to exist in the current environment.