Awesome
css-emulator
Emulate CSS UI state change events (hover, active, focus)
Installation
$ npm install vdux-css-emulator
Usage
This is a low level library intended to simulate the hover/active/focus CSS selectors using local component state and DOM events. Here's how you use it:
function render ({local}) {
return <CSSEmulator tag='button' onHoverChange={local(highlightButton)}>Hover me</CSSEmulator>
}
API - props
tag
- The HTML tag or component that you want to render (e.g.button
)onHoverChange
- Receives a boolean for hover stateonActiveChange
- Receives a bool for active stateonFocusChange
- Receives a bool for focus stateonLingerChange
- Receives a bool for linger statelingerDelay
- How long to wait to trigger thelingerChange
event. Defaults to 500 milliseconds.
Linger state
Sometimes you want to do something only if the user hovers for a short period of time (i.e. not immediately). onLingerChange
provides this primitive for you, and allows you to do something in response to the mouse 'lingering' over an element.
Why can't I just use onMouseEnter/onMouseLeave
?
Unfortunately this is not robust. Under certain circumstances if the mouse is moving quickly or if you do weird things like switch tabs while the mouse is hovering, you may not get a mouseleave
event, and your hovered thing will stay open forever (or until you mouse back over and off again). This addresses this issue and similar issues with the 'active' state.
License
MIT