when()

Render content conditionally based on a reactive condition.

Signature

function when(
  condition: () => boolean,
  then: () => WhisqNode | string | null,
  otherwise?: () => WhisqNode | string | null,
): () => Child

Parameters

Param	Type	Description
condition	() => boolean	Reactive condition
then	() => WhisqNode | string | null	Rendered when true
otherwise	() => WhisqNode | string | null	Rendered when false (optional)

Examples

import { signal, when, div, p, button } from "@whisq/core";

const loggedIn = signal(false);

div(
  when(() => loggedIn.value,
    () => p("Welcome back!"),
    () => button({ onclick: login }, "Sign In"),
  ),
)

Related primitives

• match() — multi-branch conditional for 3+ cases with a fallback.
• each() — iterate a reactive array (use together for list-plus-empty-state shapes).
• Conditional Rendering guide — narrative arc of when → match → inline ternary.