react-use-hover
v2.0.0
Published
State hook to determine whether a React element is being hovered
Downloads
2,162
Readme
react-use-hover
A React state hook to determine whether a React element is being hovered.
Installation
npm install react-use-hover
Usage
import useHover from 'react-use-hover';
function Tooltip() {
const [isHovering, hoverProps] = useHover();
return (
<>
<span {...hoverProps} aria-describedby="overlay">Hover me</span>
<Overlay visible={isHovering} role="tooltip" id="overlay">
I’m a lil popup or something!
</Overlay>
</>
);
}
Options
useHover({
mouseEnterDelayMS,
mouseLeaveDelayMS
})
mouseEnterDelayMS: number = 200
. The number of milliseconds to delay before setting theisHovering
state totrue
. (Mousing back out during this delay period will cancel the state change.)mouseLeaveDelayMS: number = 0
. The number of milliseconds to delay before setting theisHovering
state tofalse
. (Mousing back in during this period will cancel the state change.)
Testing
# Run once, with coverage
npm run test
# Watch mode
npm run test -- --watch
# Do whatever you want
npx jest src # --any --jest --options
Contributing
PRs welcome! Please ensure you npm run build
and commit before pushing (to run prettier) and maintain 100% test coverage.