Match
Describe one branch of a Switch. Use it to associate a condition with a specific view.
Render the matching playback state
import { Match, Switch, Text, signal } from 'kuito';
export default function Status() {
const state = signal<'idle' | 'playing' | 'paused'>('idle');
return (
<Switch fallback={<Text>Nothing playing</Text>}>
<Match when={state.value === 'playing'}>
<Text>Playing</Text>
</Match>
<Match when={state.value === 'paused'}>
<Text>Paused</Text>
</Match>
</Switch>
);
}Behavior
Match must be directly inside Switch. Its when condition can track state. A callback child receives the truthy value, as with Show.
Continue
Read Control flow for a complete workflow. See the complete prop reference for types and documented defaults.
Reference
Signatures
<T>(props: MatchProps<T>): KuitoElementType parameters
| Name | Constraint | Default |
|---|---|---|
T | — | — |
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
props | MatchProps<T> | Yes | — |
Returns
Props: MatchProps<T>
Props (including inherited props) 3
| Name | Type | Required | Description |
|---|---|---|---|
when | When<T> | Yes | — |
children | BranchChildren<T> | No | — |
key | string | number | No | — |
Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.