Package Exports

react-use-hover

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-use-hover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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 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.