Best practice for hover

[John Watson]

If I have a bunch of buttons that all need to respond to mouseOver 'hover' in the same way, what's the best practice for implementing this in elm?  I have so far looked at mdgriffith/elm-style-animation.  This seems fine although I wondered if using this for such simple behaviour was overkill.  As far as I can see I need to keep track of state for each button and allocate an id to each.

[Gage Peterson]

This may not be a satisfactory answer but you could just do it with CSS animations. Doing it in elm requires that the state reside somewhere in the model. There's no "state" part like in React (now considered mostly a bad practice even in that community). 

[Alexandre Galays]

If CSS transitions are too limited (they often are :( ), Gage Peterson is right about having to put that "state" in your model, there really isn't any alternative in Elm (apart from delegating to some JS code to do it instead but that lowers the maintenance fun)

Just wanted to correct one thing: Component local state is not considered a bad practice in React, at all. Lifting state such as "whether a select dropdown is opened", "the component has focus", "which grid row is currently highlighted" or in general any state that should reset should a component be unmounted/remounted to the global state atom is a bad move. That leaves the responsibility of determining by experience whether a piece of data is state or props, and people make so many mistakes doing that. 

Thankfully, The Elm language make the single atom approach much less painful than in JS thanks to pattern matching and terse Record updates.

[VeryThorough]

What do you want to happen on hover?  If you can give some details, I can probably tell you how to do it in CSS.

[John Watson]

Nothing fancy - just basic styling of colour, opacity etc.

[Alexandre Galays]

In that case, you're better of just using the :hover selector in CSS.

[John Watson]

Excellent. Thanks very much for all your help.

> --
> You received this message because you are subscribed to a topic in the
> Google Groups "Elm Discuss" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/elm-discuss/-Plv1jSG08o/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> elm-discuss...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.