useHover

React UI sensor hooks that track if some element is being hovered by a mouse.

API is consistent with ahooks.

Examples

Basic Uagge

isHovering: false

Basic usageUse ref to set elements that need listen dom.

<template>
  <div>
    <div
      ref="divRef"
      style="width: 200px; height: 200px; background: rgba(0, 0, 0, 0.2)"
    ></div>

    isHovering: <span style="color: blue">{{ isHovering }}</span>
  </div>
</template>

<script lang="ts">
import { useHover } from 'ahooks-vue';
import { ref } from 'vue';

export default {
  setup() {
    const divRef = ref(null);
    const isHovering = useHover(divRef);

    return {
      isHovering,
      divRef,
    };
  },
};
</script>

Pass in DOM element

isHovering: false

Pass in DOM elementPass in a function that returns the DOM element.

<template>
  <div>
    <div
      id="divRef"
      style="width: 200px; height: 200px; background: rgba(0, 0, 0, 0.2)"
    ></div>

    isHovering: <span style="color: blue">{{ isHovering }}</span>
  </div>
</template>

<script lang="ts">
import { useHover } from 'ahooks-vue';

export default {
  setup() {
    const isHovering = useHover(() => document.getElementById('divRef'));

    return {
      isHovering,
    };
  },
};
</script>

API

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

Params

Property	Description	Type	Default
target	DOM element or Ref Object	(() => HTMLElement) \| HTMLElement \| React.RefObject	-
onEnter	Listen to hover	()=>void	-
onLeave	Listening leave hover	()=>void	-

Result

Property	Description	Type
isHovering	Determine whether the mouse element is in the hover element	boolean

useDocumentVisibility

useInViewport

# useHover

# Examples

# Basic Uagge

# Pass in DOM element

# API

# Params

# Result

useHover

Examples

Basic Uagge

Pass in DOM element

API

Params

Result