import { Component } from 'react';
import { mouseAware } from 'react-mouse-aware';

@mouseAware({ // same as default options
    inDelay: 0,
    outDelay: 0,
    inHandler: 'onMouseEnter',
    outHandler: 'onMouseLeave',
    key: 'isOver'
})
@mouseAware({
    inDelay: 300,
    outDelay: 100,
    inHandler: 'onMouseDown',
    outHandler: 'onMouseUp',
    key: 'isPressed'
})
class CustomComponent extends Component {

    render() {
        // props will include the in and out handlers
        let { isOver, isPressed, className, ...props } = this.props;

        if (isOver) className += ' hovered'; // mouse is over component
        if (isPressed) className += ' active'; // mouse has been held down for 300ms or was just released

        return (
            <div {...props} className={className}>

            </div>
        )
    }
};

@mouseAware(options)
export default class Test extends React.Component {
    /* your code */
}

class Test extends React.Component {
    /* your code */
}

export default mouseAware(options)(Test);