Advanced

Slots

HEEx markup passed into React as children

inner_block
children

Key concepts

The default slot passed to <.react> becomes children in React. It is ordinary HEEx — a .button with a phx-click, in this case — rendered by the LiveView and handed to React as markup, not as data.

slots_live.ex

defmodule MyAppWeb.SlotsLive do
  use MyAppWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok, assign(socket, :count, 0)}
  end

  def render(assigns) do
    ~H"""
    <.react name="Slots" count={@count} socket={@socket}>
      <.button phx-click="set_count" phx-value-value={@count + 1}>
        Increment from HEEx
      </.button>
    </.react>
    """
  end

  def handle_event("set_count", %{"value" => value}, socket) do
    {:noreply, assign(socket, :count, String.to_integer(value))}
  end
end

How it works

The button inside the slot is not wired through pushEvent at all — it's a plain phx-click that Phoenix handles the same way it would outside a React tree. React only renders children; it has no idea the markup came from HEEx.

This is the tool for mixing an existing LiveView component — a modal, a table row, anything already built in HEEx — into a page that's otherwise composed with React, without rewriting it.