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

scohen
Lexical Lexical is a next-generation language server for the Elixir programming language. Features Context aware code completion As-you...
New
mhanberg
I just released the first version of Temple: an HTML DSL for Elixir and Phoenix! You can read this blog post or the docs for more info...
New
deadtrickster
I’ve just released stable versions of my Prometheus Elixir libs: Elixir client [docs]; Ecto collector [docs]; Plugs instrumenter/Export...
New
riverrun
I’ve just released version 3 of Comeonin, a password hashing library. The following small changes have been made: changes to the NIF c...
New
benlime
I created a new library GitHub - benvp/ex_cva: Class Variance Authority for Elixir which aims to make it very easy to define different va...
New
benlime
LiveMotion enables high performance animations declared on the server and run on the client. As a follow up to my previous thread A libr...
New
Qqwy
Hello everyone, I wrote a small library today called MapDiff. It returns a map listing the (smallest amount of) changes to get from map...
New
woylie
Flop is an Elixir library that applies filtering, ordering and pagination parameters to your Ecto queries. offset-based pagination with...
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
mischov
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story &lt;- Meeseeks.all(html, css("tr.athing")) do...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1140 51847 244
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
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
malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod -- where is this set? Thanks.
New
polypush135
As many of you may have realized by now (sorry for all the posts here) I’ve been working on a db problem where I’m trying to aggregate a ...
New
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
AstonJ
by Lance Halvorsen Elixir and Phoenix are generating tremendous excitement as an unbeatable platform for building modern web application...
460 27162 124
New

Sub Categories:

We're in Beta

About us Mission Statement