# `Surface.LiveComponent`
[🔗](https://github.com/surface-ui/surface/blob/v0.12.3/lib/surface/live_component.ex#L1)

A live stateful component. A wrapper around `Phoenix.LiveComponent`.

## Example

    defmodule Dialog do
      use Surface.LiveComponent

      prop title, :string, required: true

      def mount(socket) do
        {:ok, assign(socket, show: false)}
      end

      def render(assigns) do
        ~F"""
        <div class={"modal", "is-active": @show}>
          <div class="modal-background"></div>
          <div class="modal-card">
            <header class="modal-card-head">
              <p class="modal-card-title">{@title}</p>
            </header>
            <section class="modal-card-body">
              <#slot/>
            </section>
            <footer class="modal-card-foot" style="justify-content: flex-end">
              <Button click="hide">Ok</Button>
            </footer>
          </div>
        </div>
        """
      end

      # Public API

      def show(dialog_id) do
        send_update(__MODULE__, id: dialog_id, show: true)
      end

      # Event handlers

      def handle_event("show", _, socket) do
        {:noreply, assign(socket, show: true)}
      end

      def handle_event("hide", _, socket) do
        {:noreply, assign(socket, show: false)}
      end
    end

---

*Consult [api-reference.md](api-reference.md) for complete listing*