Skip to content
Utilities & Providers

Conditional

server2 kB

One branch or the other, so the JSX keeps reading like a list of things.

@stellaria/nebula-webConditionalProps

Preview

Pure logic: children when when is true, fallback otherwise. No DOM and no client boundary — it renders on the server.

Why not just use &&

For one line, && is better and you should use it. Conditional earns its place when the branch is long enough that a ternary swallows the shape of the JSX, and when both sides exist:

tsx
<Conditional when={rows.length > 0} fallback={<EmptyState title="Nothing yet" />}>
  <Table>…</Table>
</Conditional>

The alternative is a ternary wrapping thirty lines, with its : off screen.

One trap it does not have

{count && <Badge>{count}</Badge>} renders a literal 0 when the count is zero, because 0 is falsy and still a valid React child. when={count > 0} cannot make that mistake.

Props

3
PropTypeDefault

children

The `when` branch. It is a plain ternary, not a mount gate: both branches are evaluated by the parent before they get here, so an expression that must not run needs its own guard.

ReactNode

—

fallback

The other branch. Left out, a false `when` renders nothing at all, which is the usual case.

ReactNodenull

when

Which branch renders. It defaults to false rather than true, so leaving it out renders the `fallback` and never the children.

booleanfalse