What are some strategies for encapsulating the functionality inside of a component, but leaving the styling of its constituents open for customization by the user? For example, a group of radio-like buttons all have the same behavior, but may differ in styling; e.g. arranged in a grid, arranged in a menu, the "none of the above" button should be a different color, etc...

I'm thinking of just passing in a classes argument

Wanted to see what others have tried as far as "skinnable" components go

You can

(defn my-styleable-button [style]
   [:button {:on-click something
             :on-blur something-else                 
             :style style}])

Seems like the most straightforward solution to me

couldn’t a consumer reliably call (assoc-in (my-component) [1 :style] {.....}) and expect that to work?

as long as the component returns a vector, and I’d be surprised at ones that don’t

There are those that return fns 😊

Which in turn returns vectors.

And will your vector be a list or a vector after assoc-in? I can never tell, but it matters to reagent/render.

assoc-in breaks on lists and never returns lists

yeah, it wouldn’t work if you return a fun, but that’s a decent reason not to return a fun, and let people use assoc-in (maybe…)

Returning an fn is perfectly normal if you want to close over some state in Reagent. It's right there on the front page of "Introduction to Reagent". And I would say that a function with a clearly defined signature would be more straightforward in intent than some more or less implicit convention that goes against normal reagent expectations. But you could do it, sure!

@reefersleep is the style attribute different from class?

The :style should be a map, with e.g. {:background :red, :padding "0.1em"}

all of your css attributes

🙂

Or

if you want to do it with a vector of classes

(defn my-classy-button [vector-of-class-names]
[:button {:on-click something
          :on-blur something-else
          :class vector-of-class-names}])

omg I'm really tired of indentation in code blocks on Slack

So

Call it like [my-classy-button ["fancy-flat-styling-class" "class-for-making-stuff-draggable"]]

@reefersleep thanks a lot. This is really helpful! 🍻