benlime
CVA - easily construct component variants
I created a new library GitHub - benvp/ex_cva: Class Variance Authority for Elixir · GitHub 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 · GitHub 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.
Popular in Announcing
Other popular topics
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance










