callbag-jsx icon indicating copy to clipboard operation
callbag-jsx copied to clipboard

Add utility properties for focus, hover.

Open loreanvictor opened this issue 4 years ago • 0 comments

It is a common pattern to bind boolean states to whether an element is focused / hovered or not. This is a common snippet:

const focused = state(false);

<input onfocus={() => focused.set(true)} onblur={() => focused.set(false)} .../>

As a result, it would be really nice if there were additional plugins for handling this common pattern more easily, something in lines of:

const focused = state(false);

<input track-focus={focused}/>
const hovered = state(false);

<div track-hover={hovered}/>

It is to be contemplated whether track-focus should be limited to focusable elements (with a tab-index) or should it be extended to all elements.

loreanvictor avatar Nov 28 '20 09:11 loreanvictor