react-use-hover
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

react-use-hover Build Status NPM Version Minified size Greenkeeper badge

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 the isHovering state to true. (Mousing back out during this delay period will cancel the state change.)
  • mouseLeaveDelayMS: number = 0. The number of milliseconds to delay before setting the isHovering state to false. (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.

Package Sidebar

Install

npm i react-use-hover

Weekly Downloads

1,252

Version

2.0.0

License

MIT

Unpacked Size

5.78 kB

Total Files

7

Last publish

Collaborators

  • andrewbranch