useHover

Detect hover state of an element.

Import

import { useHover } from '@tidbcloud/uikit'

Usage

import { useHover } from '@tidbcloud/uikit'
import { Box } from '@tidbcloud/uikit'
 
function Demo() {
  const { hovered, ref } = useHover()
 
  return (
    <Box
      ref={ref}
      p="xl"
      style={{
        backgroundColor: hovered ? 'var(--mantine-color-blue-light)' : 'transparent'
      }}
    >
      {hovered ? 'Hovered!' : 'Hover over me'}
    </Box>
  )
}

Definition

interface UseHoverReturnValue<T extends HTMLElement = any> {
  hovered: boolean
  ref: React.RefCallback<T | null>
}
 
function useHover<T extends HTMLElement = any>(): UseHoverReturnValue<T>

useHotkeys useInViewport