classnames-like dynamic css classes handling

[YurySolovyov]

In react world, classnames is a standard library for handing dynamic css classes.
I didn't find the alternative solution, and I didn't want to use special object syntax to interop with classnames, so I've created class-names-cljs to perform this task.

I thought it might be cool to try to bring such functionality to reagent so people coming from react can use familiar tools, also it seems more robust than just using inline (str ...) + ifs.

[pesterhazy]

I like this.

We could even add this to reagent proper so that this works:

[:div {:class ["foo" "bar" :baz]}]

If the class (or classNames?) prop is a seq?, we could use Yury's classnames function to generate a space-separated string.

[danielcompton]

Relates to #154.

[YurySolovyov]

And #138 I guess

[saevarb]

Something alone these lines or #154 would be really nice. II was also thinking it could be cool to be able to do something like:

[:div 
  {:class 
    {:some-class (is-thing?) 
     :other-class (is-another-thing?)}}]

which would then evaluate the boolean predicates and generate class="some-class other-class" in the case where both predicates return true, etc.

[Deraen]

Reagent now supports collections of strings for :class: #154

[YurySolovyov]

But still no maps support, right?

[Deraen]

No.

I'm a bit conflicted about adding support for maps. Implementation wise it would be really simple thing. API wise it would add another way to do the same thing. How much benefit would this have? Is is enough to outweigh the additional complexity of API. Think about how would you explain this thing to a new Reagent user:

This property might be a string... or symbol, keyword, or collection of those... or map of keywords with values deciding if the key is used as classname....
When should I use which?
\o/

[:div.always
  {:class [:always2
           (if (is-thing?) :some-class)
           (if (is-another-thing?) :other-class)]}]

[:div.always
  {:class 
    {:always2
     :some-class (is-thing?) 
     :other-class (is-another-thing?)}}]

Using vector is 5 characters more per class (two parenthesis and if ). But using vector it is simpler to add classes which are used always, though that can of course also be done with element name shorthand. Hmmh...

[YurySolovyov]

I agree. At the point where it is not

just using inline (str ...) + ifs.

I have no intention of pushing maps support anymore.
If I really want maps, I'll just use my package.