benlime
CVA - easily construct component variants
I created a new library GitHub - benvp/ex_cva: Class Variance Authority for Elixir which aims to make it very easy to define different variations of function components. I experimented and tweeted about it a bit and I really like how the api is looking now.
This library is heavily inspired by the amazing work of Joe Bell on GitHub - joe-bell/cva: Class Variance Authority in the JS world. The approach reasonates so much with me, that I wanted to have something similar in the elixir world.
What do you guys think?
Most Liked
LostKobrakai
I just had a quick look at the readme, but wanted to leave a thank you for retaining the simple functional API. Macros are great, but I’d be worried wrapping Phoenix.Component that things will break with future liveview versions, but I can see myself using the plain API.
benlime
I just release version 0.2.0 of ex_cva.
[v0.2.0] (2022-12-06)
Improvements
variant/2now properly supports boolean values. You can now do something like the following:
variant :disabled,
[true: "disabled-class", false: "enabled-class"],
default: false
# or
variant :disabled,
[true: "disabled-class"],
default: nil
def button(assigns) do
~H"""
<button class={@cva_class} disabled={@disabled}>
<%= render_slot(@inner_block) %>
</button>
"""
end
# ... where you use that component
<.button disabled>Click me</.button>
# -> <button class="disabled-class" disabled>Click me</button>
benlime
Thanks for bringing that up Jon. I found a few things in the library when using that approach.
In general I agree with the way the original CVA library recommends on handling things like disabled. Adding a new boolean variant if the way to go. Otherwise you could also add classes with the :disabled css pseudoclasses to style the button, when it’s disabled.
Starting with 0.2.0 of ex_cva you can do sth like the post recommended. Read below.








