react-mouse-aware

    0.3.0 • Public • Published

    react-mouse-aware Build Status

    A tiny higher order component to track mouse state.

    Example

    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>
            )
        }
    };

    API

    As a decorator
    @mouseAware(options)
    export default class Test extends React.Component {
        /* your code */
    }
    As a function
    class Test extends React.Component {
        /* your code */
    }
     
    export default mouseAware(options)(Test);

    Options

    inDelay defaults to 0

    Time in ms to wait before setting the active status to true.

    outDelay defaults to 0

    Time in ms to wait before setting the active status to false.

    inHandler defaults to 'onMouseEnter'

    Property name to expose the inHandler as.

    outHandler defaults to 'onMouseLeave'

    Property name to expose the outHandler as.

    openFunction no default

    Property name to expose the force open function as. This function will ignore the in delay

    closeFunction no default

    Property name to expose the force close function as. This function will ignore the out delay.

    key defaults to 'isOver'

    Property name to expose the active status as.

    Install

    npm i react-mouse-aware

    DownloadsWeekly Downloads

    197

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • floadmin
    • unboundev
    • aembke
    • stegmanh
    • kwilson