Conditional Rendering

Branch markup with Show and friends, keeping the mounted and unmounted paths explicit.

Example

Use Show for a boolean branch and Match/Case when one value selects several mutually exclusive views.

import { Case, Match, Show } from '@askrjs/askr';

function ProjectState(props: {
  project: Project | null;
  status: 'ready' | 'failed' | 'unknown';
}) {
  return <>
    <Show when={props.project} fallback={<ProjectSkeleton />}>
      {(project) => <ProjectDetails project={project} />}
    </Show>
    <Case fallback={<UnknownState />}>
      <Match when={props.status === 'ready'}><ReadyState /></Match>
      <Match when={props.status === 'failed'}><FailureState /></Match>
    </Case>
  </>;
}

`<Show when={value} fallback={...}>{children}</Show>` renders its children when `when` is truthy and the fallback otherwise. `when` accepts a plain value or a function, and when children is a function it receives the narrowed truthy value directly — so `<Show when={user}>{u => <p>{u.name}</p>}</Show>` skips a separate null check inside the block.

Match

`Match` is a declarative branch used as a child of `Case`: `<Match when={status === 'ready'}>...</Match>` describes one condition and its content but doesn't render on its own — the component itself returns `null` and only exists so `Case` can read its `when` and `children` from the JSX tree. Each `Match` can carry an optional `key` when the branch's content needs stable identity across switches.

Case

`Case` is the switch-style counterpart to `Show`: wrap a set of `Match` children in `<Case fallback={...}>` and Askr renders whichever `Match`'s `when` is truthy first, falling through to `fallback` if none match. It's the right tool once a condition has more than two real outcomes — three or four `Show`s nested inside each other get harder to read than one `Case` with explicit branches.

Fallback content

Both `Show` and `Case` accept a `fallback` prop for the not-matched case, and `For` accepts one for the empty-collection case — all three take the same kind of renderable content, so a loading spinner or empty-state component can be shared across them. Fallback content unmounts and its DOM is torn down the moment a real branch becomes active, so it's not a good place to keep state you want to persist across the switch.