@jsvision/ui / Show

Function: Show()

Show<N>(when, then, else_?): () => N | undefined

Defined in: ui/src/reactive/show.ts:36

Choose between two branches based on a reactive condition.

Type Parameters

N

N

Parameters

when

() => boolean

Reactive predicate; only its truthiness selects the branch (memoized, so the swap happens once per transition no matter how often the values when reads change).

then

() => N

Builds the node shown while the condition is truthy.

else_?

() => N

Builds the node shown while falsy; omit it to get undefined when falsy.

Returns

A reactive accessor yielding the active branch's node (or undefined). Reading it zero or many times between swaps changes nothing.

() => N | undefined

Example

import { signal, effect, Show } from '@jsvision/ui';

const loggedIn = signal(false);
const screen = Show(
  () => loggedIn(),
  () => 'Dashboard',
  () => 'Login',
);
effect(() => console.log(screen())); // "Login"
loggedIn.set(true);                  // "Dashboard"