astro-community/flow

Use components to control flow in Astro.

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!

Project Structure

Inside of this Astro project, you'll see the following folders and files:

/
├── demo/
│   ├── public/
│   └── src/
│       └── pages/
            ├── index.astro
│           └── ...etc
└── packages/
    └── flow/
        ├── package.json
        └── ...etc

This project uses workspaces to develop a single package, @astropub/flow.

It also includes a minimal Astro project, demo, for developing and demonstrating the component.

Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run start	Starts local dev server at localhost:3000
npm run build	Build your production site to ./dist/
npm run serve	Preview your build locally, before deploying

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