react-hover-mixin

react-hover-mixin

A react mixin that will update the components state on mouse hover. Designed for tooltips, popovers, and dropdowns.

var HoverMixin = require("react-hover-mixin");
...
... React.createClass({
  mixins: [HoverMixin],
  render: function(){
    return React.createElement("div", null,

      React.createElement("b", {
          onMouseEnter: this.hoverable_onMouseEnter,
          onMouseLeave: this.hoverable_onMouseLeave,
        },
        "[hover over me]"
      ),

      this.state.hover ? "I'm being hovered over!" : null

    );
  }
});

Example

$ git clone https://github.com/espeakers/react-hover-mixin.git
$ cd react-hover-mixin/
$ npm i
$ npm start

Then it will tell you which port it's hosted on so you can open it in your browser.

API

this.state.hover

true or false depending on if it's currently being hovered over.

this.hoverable_onMouseEnter | this.hoverable_onMouseLeave

These are event handlers provided by the mixin. Simply attach them to the element you wish to observe the hover state of.

For example:

...
React.createElement("div", {
    onMouseEnter: this.hoverable_onMouseEnter,
    onMouseLeave: this.hoverable_onMouseLeave
  },
  ...
),
...

child method: hoverable_onUserLeftHoverable()

This is called when the component is not hovered over anymore. (after a 500ms wait to ensure the user isn't going to just hover right over it again)

ref: "hoverable"

Set the ref to "hoverable" on the element if you want to get it's top and left position.

For example:

...
React.createElement("div", {
    ref: "hoverable",
    onMouseEnter: this.hoverable_onMouseEnter,
    onMouseLeave: this.hoverable_onMouseLeave
  },
  ...
),
...

this.state.hoverable_top | this.state.hoverable_left

The top and left position of the "hoverable" element. These are handy when trying to absolute position a tooltip or dropdown.

this.hoverable_not_relative_to_parent_bounding_rect

Set this to true if your hoverable is not relative to the parent node.

var HoverMixin = require("react-hover-mixin");
...
... React.createClass({
  mixins: [HoverMixin],

  hoverable_not_relative_to_parent_bounding_rect: true,

  render: function(){
    ...
  }
});

Installing

$ npm install --save react-hover-mixin

FYI

This project follows semantic versioning for releases.

License

MIT