# react-hover-observer
> A React component that notifies its children of hover interactions.
Latest version **2.1.1** (published 2018-09-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-hover-observer
pnpm add react-hover-observer
yarn add react-hover-observer
bun add react-hover-observer
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.1.1 |
| Published | 2018-09-08 |
| First published | 2016-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 32.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | Ethan Selzer |
| Maintainers | ethanselzer |
| Keywords | react, mouseenter, mouseover, hover, hoverintent |
## Links
- npm: https://www.npmjs.com/package/react-hover-observer
- Repository: https://github.com/ethanselzer/react-hover-observer
- Issues: https://github.com/ethanselzer/react-hover-observer/issues
- npm.io page: https://npm.io/package/react-hover-observer
## Dependencies (3)
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [object.omit](https://npm.io/package/object.omit.md) ^3.0.0
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.1.1 (latest) — 2018-09-08
- 2.1.0 — 2018-01-21
- 2.0.2 — 2017-10-09
- 2.0.1 — 2017-05-25
- 2.0.0 — 2017-05-25
- 1.1.1 — 2016-11-03
- 1.1.0 — 2016-09-25
- 1.0.0 — 2016-08-31
## README
# react-hover-observer
A React component that notifies its children of hover interactions.
Optionally observe mouseenter, mouseleave, mouseover, and mouseout events.
Supports delayed hover and hover-off, which can help reduce unintentional triggering.
## Status
[](https://circleci.com/gh/ethanselzer/react-hover-observer)
[](https://coveralls.io/github/ethanselzer/react-hover-observer?branch=master)
[](https://www.npmjs.com/package/react-hover-observer)
[](https://opensource.org/licenses/MIT)
## Demo
Experiment with these editable examples on CodePen.
* [Basic Example](http://codepen.io/ethanselzer/pen/pPGdgx) - See react-hover-observer in action and how child components receive the isHovering prop.
* [onMouseOver example](http://codepen.io/ethanselzer/pen/KmrywY) - One use case for onMouseOver and onMouseOut is to control hover state when child components are hovered.
* [onHoverChanged example](http://codepen.io/ethanselzer/pen/MmLmYE) - Implement onHoverChanged when a parent component or global store should be notified of hover changes.
* [hoverDelayInMs and hoverOffDelayInMs](http://codepen.io/ethanselzer/pen/KmJXLR) - Implement these props to help reduce unintended hovers.
## Related Project
For mouse or touch position monitoring, please consider [react-cursor-position](https://github.com/ethanselzer/react-cursor-position).
## Installation
```sh
npm install --save react-hover-observer
```
## Usage
```JSX
import ReactHoverObserver from 'react-hover-observer';
export default () => (
);
```
Each child component of ReactHoverObserver receives a Boolean prop named `isHovering`.
react-hover-observer wraps its children in a div, which is the boundary for triggering hover events.
Optionally implement the function as child component pattern. This is especially useful if your component has an incompatible interface with react-hover-observer.
```JSX
export default () => (
{({ isHovering }) => (
)}
);
```
### Props API
`className` : String [optional] - A CSS class to be applied to the div rendered by react-hover-observer.
`hoverDelayInMs` : Number [optional] - Milliseconds to delay hover trigger. Defaults to zero. See the [hoverDelayInMs example](http://codepen.io/ethanselzer/pen/KmJXLR) for more.
`hoverOffDelayInMs` : Number [optional] - Milliseconds to delay hover-off trigger. Defaults to zero.
`onHoverChanged`: Function [optional] - Called with named argument `isHovering` when isHovering is set or unset. See the [onHoverChanged example](http://codepen.io/ethanselzer/pen/MmLmYE) for more.
`shouldDecorateChildren` : Boolean [optional] - Defaults to true. Optionally suppress decoration of child components by setting this prop false.
`onMouseEnter` : Function [optional] - Defaults to set isHovering.
`onMouseLeave` : Function [optional] - Defaults to unsetting isHovering.
`onMouseOver` : Function [optional] - See the [onMouseOver example](http://codepen.io/ethanselzer/pen/KmrywY) for more.
`onMouseOut` : Function [optional]
Each of the previous four observer functions receives a prameter of type Object with the following properties:
* `e` : Object - The browser event object (React synthetic event).
* `setIsHovering` : Function - Call this function to set `isHovering` to true.
* `unsetIsHovering` : Function - Call this function to set `isHovering` to false.
`onMouseOver` and `onMouseOut` can be used to control hover state when child components are hovered. See the [onMouseOver example](https://codepen.io/ethanselzer/pen/KmrywY) for more.
### onMouseEnter/onMouseLeave Versus onMouseOver/onMouseOut
`onMouseEnter` and `onMouseLeave` *are not* triggered by hover events bubbling up from child elements.
`onMouseOver` and `onMouseOut` *are* triggered by hover events bubbling up from child elements.
The behavior is determined by mouse event Web standards.
See the [docs at MDN](https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter) for more.
## Support
Please [open an issue](https://github.com/ethanselzer/react-hover-observer/issues).
## Development
```ssh
git clone https://github.com/ethanselzer/react-hover-observer.git
cd react-hover-observer
yarn
```
See available commands:
```ssh
npm run
```
## Contributing
Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch,
add commits, and [open a pull request](https://github.com/ethanselzer/react-hover-observer/compare/).
## License
MIT
---
_Source: https://npm.io/package/react-hover-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._