Skip to content

Latest commit

 

History

History
22 lines (17 loc) · 799 Bytes

README.md

File metadata and controls

22 lines (17 loc) · 799 Bytes

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.