Switch & Match

Switch renders the first matching Match child in order. Each Match is evaluated with the same truthiness rules as Show, and fallback is rendered when nothing matches.

function Switch(props: {
  children: React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

function Match<T>(props: {
  when: T | null | undefined | false;
  children: React.ReactNode | ((value: NonNullable<T>) => React.ReactNode);
}): React.ReactNode;

Basic usage#

Place multiple Match components inside Switch and provide an optional fallback.

import { Switch, Match } from '@ilokesto/utilinent';

function StatusBadge({ status }) {
  return (
    <Switch fallback={<span>Unknown</span>}>
      <Match when={status === 'loading'}>Loading...</Match>
      <Match when={status === 'ready'}>Ready</Match>
      <Match when={status === 'error'}>Error</Match>
    </Switch>
  );
}

Function children#

If you pass a function to Match, it receives the evaluated value for that branch.

<Switch>
  <Match when={user}>{(user) => <Profile user={user} />}</Match>
  <Match when={!user}>Sign in</Match>
</Switch>

DOM-preserving variants#

Use Switch.div to keep a wrapper element while swapping the matched content.

<Switch.div className="status">
  <Match when={isOnline}>Online</Match>
  <Match when={!isOnline}>Offline</Match>
</Switch.div>