benlime

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

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

benlime

I just release version 0.2.0 of ex_cva.

[v0.2.0] (2022-12-06)

Improvements

  • variant/2 now 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

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.

Where Next?

Popular in Libraries Top

New
alisinabh
Hey everyone i’ve developed a library for Jalaali calendar for elixir which supports converting Gregorian dates to Jalaali and vice vers...
New
RobertDober
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
239 11851 134
New
hpopp
After just over two years in development, this latest version of Pigeon is what I finally consider done in regards to my original vision ...
New
seancribbs
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
New
woutdp
Hi! I wanted to introduce my latest project LiveSvelte. It allows you to render Svelte inside LiveView with end-to-end reactivity. It’s ...
New
Crowdhailer
I have been updating a library that allows you to pipe between functions that use the erlang result tuple convention. Assuming you have...
New
MRdotB
I needed to reuse React components from my Chrome extension in my Phoenix/LiveView backend. I noticed that for Svelte/Vue, there are live...
New
engineeringdept
I’ve just released the first version of Snap, an Elasticsearch client. It borrows ideas about application structure and process managemen...
New
bryanjos
Hi, I wanted share a small library we at Revelry Labs made for rendering react components from the server side. There are instructions fo...
New

Other popular topics Top

SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 49522 488
New
sacepums
Hey guys. I'm new to elixir and im really stocked about it. But I ran into a bit of problem - I need to convert a date sting, for examp...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
magnetic
Hey :wave:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and althoug...
New

Sub Categories:

We're in Beta

About us Mission Statement