# `PrimerLive.StatefulConditionComponent`

A wrapper component that takes a condition and compares the initial state with the current state after a re-render.
This is useful when the wrapped component should behave differently on initial mount and subsequent updates.

## Examples

### Conditional is_show_on_mount

Our goal is to show a dialog on a route to create a new Post. We also want to link to that page and show the dialog immediately, without fade-in.

In the example code, the 'Create new post' dialog is shown when `@live_action` is `:new`.
When triggered from the posts listing, the dialog appears with a fade-in effect.
Additionally, we use dialog attribute `is_show_on_mount` when the condition `@live_action == :new` is also the initial condition - which is at page load.

        <.live_component
          id="create-post-dialog-component"
          module={PrimerLive.StatefulConditionComponent}
          condition={@live_action == :new || nil}
          :let={
            %{
              equals_initial_condition: equals_initial_condition,
              condition: condition
            }
          }
        >
          <.dialog id="create-post"
            :if={condition}
            is_show
            is_show_on_mount={equals_initial_condition}
            on_cancel={JS.patch(~p"/posts")}
          >
            ...
          </.dialog>
        </.live_component>

---

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