Switch

Shows the first Match whose when is truthy, or the fallback when none is.

Shows the first Match whose when is truthy, or the fallback when none is. Re-selecting the same branch with the same truthiness (or, when keyed, the same value) does not rebuild it.

Import#

import { Switch } from "@shadow-js/web";

Signature#

function Switch(props: SwitchProps): Accessor<unknown>

Parameters#

Name	Description
`props`	See SwitchProps.

Returns#

An accessor of the selected branch's content.

Throws#

TypeError (production message SHADOW_SWITCH_CHILDREN) when a child is neither a Match nor null, undefined or a boolean.

Examples#

import { useSignal } from "@shadow-js/core";
import { Match, Switch } from "@shadow-js/web";

function Status() {
  const [error] = useSignal<string | null>(null);
  const [data] = useSignal<string | null>("ready");
  return (
    <Switch fallback={<p>Loading...</p>}>
      <Match when={error()}>
        <p>Failed</p>
      </Match>
      <Match when={data()}>
        <p>Ready</p>
      </Match>
    </Switch>
  );
}