---

useHoverState()

The one aware of keyboard navigation as well 😉

npm i use-hover-state

---

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