use-hover

1import { useBoolean } from '@/registry/hooks/use-boolean'
2import { useEventListener } from '@/registry/hooks/use-event-listener'
3import type { BasicTarget } from '@/registry/lib/create-effect-with-target'
4 
5export interface UseHoverOptions {
6  onEnter?: () => void
7  onLeave?: () => void
8  onChange?: (isHovering: boolean) => void
9}
10 
11export function useHover(
12  target: BasicTarget,
13  options?: UseHoverOptions,
14): boolean {
15  const { onEnter, onLeave, onChange } = options || {}
16 
17  const [state, { setTrue, setFalse }] = useBoolean(false)
18 
19  useEventListener(
20    'mouseenter',
21    () => {
22      onEnter?.()
23      setTrue()
24      onChange?.(true)
25    },
26    {
27      target,
28    },
29  )
30 
31  useEventListener(
32    'mouseleave',
33    () => {
34      onLeave?.()
35      setFalse()
36      onChange?.(false)
37    },
38    {
39      target,
40    },
41  )
42 
43  return state
44}