A React hook for tracking user interaction with the DOM elements, combining 🖱mouse events and ⌨️ keyboard focus

Quick Start

import * as React from 'react';
import { useHoverState } from 'use-hover-state';

const Component = (props) => {
  const [isHovering, hoverState] = useHoverState();
  return <div {...hoverState}>{isHovering ? 'Hovering' : 'Not hovering'}</div>;
};

API

useHoverState(options?)

Returns [boolean, spreadProps]

This hook returns a tuple with the:

• boolean isHovered state, representing current active state of an element
• object spreadProps, which one should spread on the given element
• object realState, which one can use to distinguish mouse and keyboard activity

HoverOptions

| Property | Type | Description | | ---------- | ------ | -------------------------------------------------------------- | | enterDelay | number | Delays setting isHovering to true for this amount in ms | | leaveDelay | number | Delays setting isHovering to false for htis amount in ms |

You almost certainty need to set leaveDelay to a non zero value

supportsHover

A hover feature detector

import { supportsHover } from 'react-hover-state';

switch (supportsHover()) {
  case true:
    'yes';
  case false:
    'no';
  default:
    'this is server';
}

See also

• @react-hook/hover similar package without keyboard functionality

LICENSE

MIT