When

Acts like a conditional or ternary statement, mostly used as conditional child slot inside of a <Switch> component

When do I Use This?

This component is mostly used as a child slot inside of a <Switch> component, but it can also be used like a conditional or ternary expression

How to Use

---
import { When } from 'astro-headless-ui';

const bool = true;
---
<When {bool}>
    <h1>I am True</h1>
</When>

<When when={true}>
    <h1>I am True</h1>
</When>

<When when={true} and={true}>
    <h1>I am True</h1>
</When>

<h1>I am True</h1>
<h1>I am True</h1>
<h1>I am True</h1>

More Examples

Props

There are no defined props, instead every prop is tested using Boolean() if all props return true then the default slot gets rendered, if one of the props returns false then the false slot is rendered

Slots

default

Rendered if all props tested with Boolean() return true

false

Rendered if at least one prop tested with Boolean() returns false

Examples

Conditional

<When if={true}>
    <h1>I am True</h1>
</When>

<h1>I am True</h1>

Ternary

Create a ternary by taking advantage of the false slot

<When if={false}>
    <h1>I am true</h1>
    <h1 slot='false'>I am false</h1>
</When>

<h1>I am false</h1>

Use inside a <Switch>

<Switch>
    <h3>This is the Default</h3>
    <When slot="1" is={false}>
        <h1>1 is True</h1>
    </When>
    <When slot="2" is={true}>
        <h1>2 is True</h1>
    </When>
    <When slot="3" is={true}>
        <h1>3 is True</h1>
    </When>
</Switch>

<h1>2 is True</h1>