LocalLiveView.Component (LocalLiveView v0.1.0)

Copy Markdown View Source

Phoenix component for mounting a LocalLiveView.

Import this module in your application's CoreComponents:

defmodule MyAppWeb.CoreComponents do
  import LocalLiveView.Component
  ...
end

Then use it in your templates:

<.local_live_view view="MyLive" />
<.local_live_view view="Cart" items={@items} />

Summary

Functions

Renders a LocalLiveView mount point.

Assembles the deterministic mirror_id for a given LocalLiveView component within a parent LiveView process.

Functions

local_live_view(assigns)

Renders a LocalLiveView mount point.

Like Phoenix.Component.live_component/1, any attribute other than view is forwarded to the view as the assigns of its LocalLiveView.update/2 callback. id is forwarded too, and additionally used as the mount point's DOM id.

Attributes

  • view (required) - the LocalLiveView module name, as a string.
  • id - stable element id; defaults to a server-generated random id.

Examples

<.local_live_view view="MyLocal" />

<.local_live_view view="Cart" items={@items} currency="EUR" />

The second example mounts the view, calling its update/2 with:

%{id: _, items: items, currency: "EUR"}

mirror_id(socket_id, id)

@spec mirror_id(Phoenix.LiveView.Socket.t(), String.t()) :: String.t()

Assembles the deterministic mirror_id for a given LocalLiveView component within a parent LiveView process.

Accepts the parent socket (or directly its socket.id), and either:

  • a default ID derived from view name
  • an explicit custom DOM ID provided to <.local_live_view id="..." />

Examples

# Explicit ID passed to component:
mirror_id = LocalLiveView.Component.mirror_id(socket, "my-custom-cart")

# Default ID derived from view name:
mirror_id = LocalLiveView.Component.mirror_id(socket, "llv-Cart")