Show

Shows children while when is truthy, and fallback otherwise.

Shows children while when is truthy, and fallback otherwise. The branch is rebuilt only when the truthiness of when changes (or, with keyed, when its identity changes).

when follows JavaScript truthiness: 0, "", null, undefined and false show the fallback. While fallback is not given, a falsy when renders nothing.

Import#

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

Signature#

function Show<T>(props: ShowProps<T>): Accessor<unknown>

function Show<T>(props: ShowLooseProps<T>): Accessor<unknown>

Parameters#

Name	Description
`props`	See ShowProps.

Returns#

An accessor of the current branch's content. The DOM runtime's insert consumes it.

Examples#

import { useSignal } from "@shadow-js/core";
import { Show } from "@shadow-js/web";

function Greeting() {
  const [user] = useSignal<{ name: string } | null>(null);
  return (
    <Show when={user()} fallback={<p>Sign in</p>}>
      {(u) => <p>Hello {u().name}</p>}
    </Show>
  );
}