Hoverable

A mixin for hoverable React.js components.

I wrote this because I got tired of writing the same boilerplate code to handle the hover state on components. With this class, all you have to do now is mix it in and do some minimal wiring.

Usage

    var ThingWithHover = React.createClass({
        mixins: [Hoverable],
        render: function () {
            return ( 
                <div {...this.hoverableProps()} >
                    {this.state.hovered ? <HoverDisplay /> : null}
                </div>
            );
    });

Explanation

Wiring the spread of {...this.hoverableProps()} onto the hoverable element adds the onMouseEnter and onMouseLeave listeners which update this.state.hovered.