open-consul/ui/packages/consul-ui/app/components/state-chart/README.mdx

---
class: ember
---
# StateChart

```hbs
<StateChart
  @chart={{xstateStateChartObject}}
  as |State Guard Action dispatch state|>
</StateChart>
```

`<StateChart />` is a renderless component that eases rendering of different states
from within templates using XState State Machine and Statechart objects.

### Arguments

| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `chart` | `object` |  | An xstate statechart/state machine object |
| `initial` | `String` | The initial value of the state chart itself | The initial state of the machine/chart (defaults to whatever is defined on the object itself) |

The component currently yields 3 conextual components:

- `<State />`: Used for rendering matching certain states ([also see State Component](../state/README.mdx))
- `<Action @name="" @exec={{action ""}} />`: Used to wire together ember actions to xstate actions.
- `<Guard @name="" @cond={{action ""}} />`: Used to wire together ember actions or props to xstate guards.

and 2 further objects:

- `dispatch`: An action to dispatch an xstate event
- `state`: The state object itself for usage in the `state-matches` helper

### Example

```hbs
<StateChart
  @chart={{xstateStateChartObject}}
  as |State Guard Action dispatch state|>
    <Guard @name="nameOfGuard" @cond={{action "testGuardCondition"}} />
    <Action @name="nameOfAction" @exec={{action "executeAction"}} />
    <State @matches="idle">
      Currently Idle
    </State>
    <State @matches="loading">
      Currently Loading
    </State>
    <State @matches={{array 'loading' 'idle'}}>
      Idle and loading
      <button disabled={{state-matches state "loading"}} onclick={{action dispatch "START"}}>Load</button>
    </State>
</StateChart>
```

### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---