Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-hover-observer

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-hover-observer

A React component that notifies its children of hover interactions.

  • 2.1.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

CircleCI Coverage Status npm License

Demo

Experiment with these editable examples on CodePen.

  • Basic Example - See react-hover-observer in action and how child components receive the isHovering prop.
  • onMouseOver example - One use case for onMouseOver and onMouseOut is to control hover state when child components are hovered.
  • onHoverChanged example - Implement onHoverChanged when a parent component or global store should be notified of hover changes.
  • hoverDelayInMs and hoverOffDelayInMs - Implement these props to help reduce unintended hovers.

For mouse or touch position monitoring, please consider react-cursor-position.

Installation

npm install --save react-hover-observer

Usage

import ReactHoverObserver from 'react-hover-observer';

export default () => (
    <ReactHoverObserver>
        <YourChildComponent />
    </ReactHoverObserver>
);

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.

export default () => (
    <ReactHoverObserver>
        {({ isHovering }) => (
            <YourChildComponent isActive={isHovering} />
        )}
    </ReactHoverObserver>
);

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

Support

Please open an issue.

Development

git clone https://github.com/ethanselzer/react-hover-observer.git
cd react-hover-observer
yarn

See available commands:

npm run

Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

License

MIT

Keywords

FAQs

Package last updated on 08 Sep 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc