DaisyUIComponents - A Phoenix LiveView + DaisyUI library 🌼

Your Libraries & OS Mentoring Libraries
, ,
21

First of all, that you for sharing this library!

A question I have relates with Phoenix 1.8 and the build-in support for DaisyUI.

For example, an avatar can be defined in plain HTML and DaisyUI classes as:

<div class="avatar">
    <div class="w-16 rounded-full">
      <img src="..." />
    </div>
</div>

while in DaisyUIComponents as

<.avatar online>
    <div class="w-16 rounded-full">
        <img src="..." />
    </div>
</.avatar>

Are they mere (equivalent) alternatives? Is there any benefit using the one against the other?

Edit: Can this library be used with Phoenix 1.8rc already?

22

Hi @bdarla

That’s a very good question and depending on the component it may seen that both approaches are similar - wrapping the component using phoenix attributes or using the classes directly.
The advantage of using DaisyUIComponents is that it is using attributes and slots to change component behavior. For the Avatar example, if you want to make your user to have the online attribute, should be straightforward using the library

<.avatar online={@user.online == true}>
    <div class="w-16 rounded-full">
        <img src="..." />
    </div>
</.avatar>

Now if you are using daisyui without wrapping in a component, it’s a bit more hard to customize the behavior of a component because you have to add/remove classes based on your data:

<div class={["avatar", @user.online && "avatar-online"]}>
    <div class="w-16 rounded-full">
      <img src="..." />
    </div>
</div>

Avatar is a really simple component so it might not seem that it will bring a lot of benefits but if you get a more complex case of modifying a component behavior based on your data , you will end up creating a lot of ifs in your component to remove or add classes to simulate this behavior.
We can see more value in more complex components such as table which can use col as slots, creating both the header and body on a single slot will make the code more easier and clean to read.

The library should be fully compatible with the new phoenix release, I created a branch with a new Readme description on how to use it and I will merge as soon as the new phoenix version is officially released.

3 Likes