Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
react-hoverintent
Advanced tools
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."
npm install react-hoverintent
The demo with live examples can be viewed here.
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
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>
)
}
}
https://github.com/nerdchacha/react-hoverintent
Yatin Gera
Vijay Mohan Singh Ranghar
briancherne - initial work and setup
https://github.com/nerdchacha/react-hoverintent/issues
This project is licensed under the MIT License
FAQs
A simple react implementation over jquery-hoverintent
The npm package react-hoverintent receives a total of 395 weekly downloads. As such, react-hoverintent popularity was classified as not popular.
We found that react-hoverintent demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.