Emulate CSS UI state change events (hover, active, focus)
$ npm install vdux-css-emulator
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>
}
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.
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.
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.
MIT