Lv-States

lv-states (short for LiveView States) provides a handful of state management helpers for Phoenix LiveView Sockets with the aim of simplifying common needs of client <> server communication present in interactive applications.

See it in action at https://lv-states.fly.dev

Installation

def deps do
  [
    {:lv_states, "~> 0.1.0"}
  ]
end

WithSearch

Useful for those situations in which a search is present in the UI.

Usage

defmodule CarInventory do
  use LvStates.WithSearch, [:model]
  #...rest of functions
end

The use of LvStates.WithSearch in this case has two consequences:

1. The LiveView.Socket is populated with a new Map search.

   %LiveView.Socket: %{
   assigns: %{
    #...
    search: %{
      model: %{
        searching: false,
        query: nil,
      }
    }
   }
   }

2. A new event handler is added to the client module (ie CarInventory)

def handle_event("search-model", %{"query" => query}, socket), do:...

You can now comfortably point your client events to the new event handler, Eg.

  <form phx-change="search-model">
    <input
      type="text"
      name="query"
      phx-debounce="300"
      value="<%= @search.model.query %>"
      placeholder="Insert the model name to search">
  </form>

For a full example please see the source of the demo