Skip to Content
ComponentsSwitch / Match

Switch / Match

Switch renders the first truthy Match and falls back when nothing matches.

It is a small branching utility component and is safe to use from server-rendered code.

Live Example

State-driven branching

Click the controls to switch between guest, loading, error, member, and admin states.

Please sign in to continue.

Import

import { Match, Switch } from "react-rsc-kit";

Props

Switch

PropTypeDefaultDescription
childrenReactNoderequiredOne or more Match elements.
fallbackReactNodeundefinedRendered when no match succeeds.

Match

PropTypeDescription
whenT | (() => T)Value or getter used for matching.
childrenReactNode | ((value: Truthy<T>) => ReactNode)UI or render function for the matched branch.

Usage

import { Match, Switch } from "react-rsc-kit";
 
function StatusView({
  isLoading,
  error,
  data,
}: {
  isLoading: boolean;
  error: string | null;
  data: { title: string } | null;
}) {
  return (
    <Switch fallback={<div>No result</div>}>
      <Match when={isLoading}>
        <div>Loading...</div>
      </Match>
 
      <Match when={error}>{(message) => <div>Error: {message}</div>}</Match>
 
      <Match when={data}>{(value) => <div>{value.title}</div>}</Match>
    </Switch>
  );
}

Notes

  • Switch only accepts direct Match children.
  • Matching is evaluated from top to bottom.
  • children can be a render function when you want the matched truthy value.
Last updated on
ShowuseArray