Show

Show renders its children when when is truthy, otherwise an optional fallback (or nothing).

Use it for a single optional branch. For multiple ordered branches, use Switch / Match.

Please sign in to continue.

Import


import { Show } from "react-rsc-kit";

Props

Prop	Type	Default	Description
`when`	`T \| (() => T)`	required	Value or getter; if truthy after resolution, `children` render.
`children`	`ReactNode \| ((value: Truthy<T>) => ReactNode)`	required	Static content or a function that receives the truthy `when` value.
`fallback`	`ReactNode`	`undefined`	Rendered when `when` is falsy. If omitted, renders nothing.

Usage


import { Show } from "react-rsc-kit";
 
function Greeting({ user }: { user: { name: string } | null }) {
  return (
    <Show when={user} fallback={<p>Please sign in</p>}>
      {(u) => <p>Welcome, {u.name}</p>}
    </Show>
  );
}

Notes

Truthiness matches Match: values like 0, "", false, null, and undefined are not shown.
For several mutually exclusive branches, prefer Switch and Match.

Show

Optional user panel

Import

Props

Usage

Notes