# PhxComponentHelpers
[![github](https://github.com/cblavier/phx_component_helpers/actions/workflows/elixir.yml/badge.svg)](https://github.com/cblavier/phx_component_helpers/actions/workflows/elixir.yml)
[![codecov](https://codecov.io/gh/cblavier/phx_component_helpers/branch/main/graph/badge.svg)](https://codecov.io/gh/cblavier/phx_component_helpers)
## 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:
```elixir
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.
```elixir
= 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`.
```elixir
def deps do
[
{:phx_component_helpers, "~> 0.1.0"},
{:jason, "~> 1.0"} # only required if you want to use json encoding options
]
end
```