The one aware of keyboard navigation as well useHoverState()
npm i use-hover-state
A React hook for tracking user interaction with the DOM elements, combining
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?)
boolean
, spreadProps
]
Returns [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