Home

Awesome

css-emulator

js-standard-style

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

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