PhxComponentHelpers

github codecov

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