useHover

作用

监听 DOM 元素是否有鼠标悬停

原理

监听 mouseenter 触发 onEnter 事件，切换状态为 true，监听 mouseleave 触发 onLeave 事件，切换状态为 false

源码

import useBoolean from '../useBoolean'
import useEventListener from '../useEventListener'
import type { BasicTarget } from '../utils/domTarget'

export interface Options {
  onEnter?: () => void
  onLeave?: () => void
  onChange?: (isHovering: boolean) => void
}

// 监听 DOM 元素是否有鼠标悬停
export default (target: BasicTarget, options?: Options): boolean => {
  // 结构出配置中的 onEnter、onLeave、onChange方法
  const { onEnter, onLeave, onChange } = options || {}

  // 保存当前状态
  const [state, { setTrue, setFalse }] = useBoolean(false)

  // 监听 mouseenter 和 mouseleave 事件
  useEventListener(
    'mouseenter',
    () => {
      // 触发 onEnter 事件
      onEnter?.()
      // 设置状态为 true
      setTrue()
      // 触发 onChange 事件
      onChange?.(true)
    },
    {
      target,
    },
  )

  useEventListener(
    'mouseleave',
    () => {
      // 触发 onLeave 事件
      onLeave?.()
      // 设置状态为 false
      setFalse()
      // 触发 onChange 事件
      onChange?.(false)
    },
    {
      target,
    },
  )

  // 返回当前状态
  return state
}