react-hoverintent

A simple react implementation over jquery-hoverintent

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-hoverintent
0.0.107 years ago7 years agoMinified + gzip package size for react-hoverintent in KB

Readme

React Hoverintent

react-hoverintent is a react wrapper over jquery-hoverintent plugin.
"hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call."
jquery-hoverintent.

Installation

``npm install react-hoverintent``

Demo

The demo with live examples can be viewed here.

Props

``onMouseOver`` : The callback to fire on mouse over event
``onMouseOut`` : The callback to fire on mouse out event
``timeout`` : A simple delay, in milliseconds, before the ``onMouseOut` callback is fired. If the user mouses back over the element before the timeout has expired the `onMouseOut` callback will not be called (nor will the `onMouseOver`` callback be called). This is primarily to protect against sloppy/human mousing trajectories that temporarily (and unintentionally) take the user off of the target element... giving them time to return. Default ``timeout: 0`` ``sensitivity`` : If the mouse travels fewer than this number of pixels between polling intervals, then the ``onMouseOver`` callback will be called. With the minimum sensitivity threshold of 1, the mouse must not move between polling intervals. With higher sensitivity thresholds you are more likely to receive a false positive.
Default ``sensitivity: 7``
``interval`` : The number of milliseconds hoverIntent waits between reading/comparing mouse coordinates. When the user's mouse first enters the element its coordinates are recorded. The soonest the ``onMouseOut` callback can be called is after a single polling interval. Setting the polling interval higher will increase the delay before the first possible `onMouseOver`` call, but also increases the time to the next point of comparison.
Default ``interval: 700``

Use

import HoverIntet from 'react-hoverintent'
import classnames from 'classnames'

class App extends Component {
  constructor () {
    super()
    this.state = { mouseover: false }
    this.onMouseOver = this.onMouseOver.bind(this)
    this.onMouseOut = this.onMouseOut.bind(this)
  }
  onMouseOver () {
    this.setState({mouseover: true})
  }
  onMouseOut () {
    this.setState({mouseover: false})
  }
  render () {
    let {mouseover} = this.state
    return (
      <div className='container'>       
        <HoverIntent
          onMouseOver={this.onMouseOver}
          onMouseOut={this.onMouseOut}
          sensitivity={10}
          interval={1000}
          timeout={250}
        >
        	<button>Hover</button>
        </HoverIntent>
        <span className={classnames('popover', {'open': mouseover})}>Hover</span>
      </div>
    )
  }
}

Repo

https://github.com/nerdchacha/react-hoverintent

Authors

Yatin Gera
Vijay Mohan Singh Ranghar

Credits

briancherne - initial work and setup

Issue tracker

https://github.com/nerdchacha/react-hoverintent/issues

License

This project is licensed under the MIT License