@arcmantle/lit-jsx / runtime/choose-component

runtime/choose-component

Functions

Choose()

Choose<T>(props): unknown

Defined in: runtime/choose-component.ts:39

Conditionally renders content based on evaluating multiple condition-output pairs against a value. Similar to lit-html's choose directive, evaluates each condition in order and renders the first match.

Type Parameters

T

T = undefined

The type of the value to evaluate against (defaults to undefined for no value)

Parameters

props

children

ChooseChild<T> | ChooseChild<T>[]

Single [condition, output] tuple or multiple tuple children to evaluate

value?

T

The value to pass to each condition and output function

Returns

unknown

The rendered JSX element from the first matching condition, or nothing if no match

Example

// Multiple condition-output tuples as separate children
<Choose value={status}>
  {[
    (status) => status === 'loading',
    () => <div>Loading...</div>
  ]}
  {[
    (status) => status === 'error',
    (status) => <div>Error: {status}</div>
  ]}
  {[
    () => true, // default case
    (status) => <div>Status: {status}</div>
  ]}
</Choose>