Astro Flow

Astro Flow lets you use components to control flow in Astro.

The <For> component loops over iterable objects like Array, Map, Set, and so on.

---
import { For } from '@astropub/flow'
---
<For of={items}>{item => <h2>{item.title}</h2>}</For>

The iterate() function provides the same functionality as a utility.

---
import { iterate } from '@astropub/flow'
---
{iterate(items, item => <h2>{item.title}</h2>)}

The <When> component renders if the given conditions are truthy.

---
import { When } from '@astropub/flow'
---
<When test1={checkForTruthiness} test2={alsoCheckForTruthiness}>
  <p>Everything was Truthy!</p>

  <Fragment slot="else">
    <p>Not everything was truthy...</p>
  </Fragment>
</When>

The <Switch> component evaluates an expression and renders the <Case> component that matches the expression's value.

---
import { Switch, Case } from '@astropub/flow'
---
<Switch of={null}>
  <Case of={true}>
    <h1>Positive</h1>
    <h2>Truly Positive</h2>
  </Case>
  <Case of={false}>
    <h1>Negative</h1>
    <h2>Really Negative</h2>
  </Case>
  <Case default>
    <h1>Default</h1>
    <h2>Definitely Default</h2>
  </Case>
</Switch>

Usage

Add Astro Flow to your project.

npm install @astropub/flow

Use Astro Flow in your project.

---
import { Case, For, Switch } from '@astropub/flow'
---
<For of={items}>{
  (item) => <h2>{item.title}</h2>
}</For>

<When test={true}>
  <p>Things are true.</p>
</When>

<Switch of={null}>
  <Case of={true}>
    <h1>Positive</h1>
    <h2>Truly Positive</h2>
  </Case>
  <Case of={false}>
    <h1>Negative</h1>
    <h2>Really Negative</h2>
  </Case>
  <Case default>
    <h1>Default</h1>
    <h2>Definitely Default</h2>
  </Case>
</Switch>

Enjoy!

Want to learn more? Read the Astro documentation or jump into the Astro Discord.