PhxComponentHelpers
Presentation
PhxComponentHelpers
are helper functions meant to be used within Phoenix
LiveView live_components to make your components more configurable and extensible
from your templates.
It provides following features:
- set html attributes from component assigns
- set data attributes from component assigns
- set phx_* attributes from component assigns
- encode attributes as JSON from an Elixir structure assign
- validate mandatory attributes
- set and extend css classes from component assigns
Example
PhxComponentHelpers
allows you to write components as such:
defmodule Forms.Button do
use MyAppWeb, :live_component
import PhxComponentHelpers
def mount(socket), do: {:ok, socket}
def update(assigns, socket) do
assigns =
assigns
|> extend_class("bg-blue-700 hover:bg-blue-900 ...")
|> set_component_attributes([:type, :id, :label], required: [:label])
|> set_phx_attributes()
{:ok, assign(socket, assigns)}
end
def render(assigns) do
~L"""
<button <%= @html_id %> <%= @html_type %> <%= @html_phx_click %> <%= @html_class %>>
<%= @label %>
</button>
"""
end
end
You can then use your components like these.
= live_component @socket, ButtonGroup, class: "pt-2" do
= live_component @socket, Button, type: "submit", phx_click: "btn-click", label: "Save"
Documentation
Available on [https://hexdocs.pm/phx_component_helpers].
Installation
Add the following to your mix.exs
.
def deps do
[
{:phx_component_helpers, "~> 0.1.0"},
{:jason, "~> 1.0"} # only required if you want to use json encoding options
]
end