npm

Need private packages and team management tools?Check out npm Orgs. »

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

115

version

0.3.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability