useElementHover

Category

Sensors

Export Size

500 B

Last Changed

5 days ago

Reactive element's hover state

Demo

Usage

import { useElementHover } from '@reause/core'
import { useRef } from 'react'

const myHoverableElement = useRef<HTMLButtonElement>(null)
const isHovered = useElementHover(myHoverableElement)

<button ref={myHoverableElement}>
  {isHovered ? 'Thank you!' : 'Hover me'}
</button>

You can also provide hover options:

import { useElementHover } from '@reause/core'
import { useRef } from 'react'

const el = useRef<HTMLButtonElement>(null)
const isHovered = useElementHover(el, { delayEnter: 200, delayLeave: 600 })

// leave detection is also supported on elements being removed from the DOM
const isHoveredWithRemoval = useElementHover(el, { triggerOnRemoval: true })

Type Declarations

export interface UseElementHoverOptions extends ConfigurableWindow {
    delayEnter?: number;
    delayLeave?: number;
    triggerOnRemoval?: boolean;
}

export function useElementHover(target: RefObject<EventTarget | null | undefined>, options?: UseElementHoverOptions): boolean

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

1f7de - fix(core): resolve useElementHover audit findings (#549)

8fddc - chore!: remove all Vue-only Maybe* types and getter unions, adopt React Ref (#462)