# @alita/flow

> @alita/flow

Latest version **3.1.2** (published 2023-08-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alita/flow
pnpm add @alita/flow
yarn add @alita/flow
bun add @alita/flow
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2023-08-01 |
| First published | 2022-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 36.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 807 |
| Maintainers | pengyh, ashoka_j, hang1017, hammersjs, cjy0208, xiaohuoni |

## Links

- npm: https://www.npmjs.com/package/@alita/flow
- Repository: https://github.com/alitajs/alita
- Homepage: https://github.com/alitajs/alita/tree/master/packages/flow#readme
- Issues: https://github.com/alitajs/alita/issues
- npm.io page: https://npm.io/package/@alita/flow

## Dependencies (2)

- [@sentry/browser](https://npm.io/package/@sentry/browser.md) ^6.16.1
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Recent versions

- 3.1.2 (latest) — 2023-08-01
- 4.0.0-alpha.1 (alpha) — 2025-08-08
- 3.0.0-rc.1 (rc) — 2022-03-29
- 3.0.0-beta.6 (beta) — 2022-03-29
- 3.1.1 — 2023-03-08
- 3.1.0 — 2022-10-12
- 3.0.3 — 2022-09-19
- 3.0.2 — 2022-08-26
- 3.0.1 — 2022-06-28
- 3.0.0 — 2022-06-21
- 3.0.0-beta.5 — 2022-03-14
- 3.0.0-beta.4 — 2022-03-12
- 3.0.0-beta.3 — 2022-02-09
- 3.0.0-beta.2 — 2022-01-20
- 3.0.0-alpha.1 — 2022-01-20

## README

# @alita/flow

根据 solid 框架 api 的灵感，封装的 react 的流程控制组件库，现在的实现是常规实现，后续根据 react18 的 api 可以默认对这些东西进行优化。

## For

 ```typescript
 <For each={items} fallback={<div>No items</div>}>
   {(item, index) => <div data-index={index()}>{item}</div>}
 </For>
 ```

 ```ts
 {
   items.map((item, index) => <div data-index={index()}>{item}</div>)
 }
 ```

## Show

```typescript
<Show when={bool} fallback={<div>hidden!</div>}>
   <div>show!!</div>
</Show>
```

```ts
{
  bool && <div>show!!</div>
  !bool && <div>hidden!</div>
}
```

## Switch

```typescript
<Switch fallback={<FourOhFour />}>
  <Match when={state.route === 'home'}>
    <Home />
  </Match>
  <Match when={state.route === 'settings'}>
    <Settings />
  </Match>
</Switch>
```

```ts
{
  state.route === 'home' && <Home />
  state.route === 'settings' && <Settings />
  (state.route !== 'home' && state.route !== 'settings') && <FourOhFour />
}
```
## ErrorBoundary

```typescript
<ErrorBoundary
    fallback={({ error, componentStack, resetError }) => (
        <div>
            Error: {error.toString()}
            <button
              onClick={() => {
                console.log(componentStack);
                // setabc([1, 2, 3]);
                resetError();
              }}
            >
              重置错误
            </button>
            <details>Stack:{componentStack?.toString()}</details>
        </div>
        )}
    >
    <Error />
</ErrorBoundary>
```

## Page
## Header

## Content
## Footer


参考api https://www.solidjs.com/docs/latest/api

同事看到我写的东西，给我发了一个竞品 https://github.com/romac/react-if

See our website [alitajs](https://alitajs.com) for more information.

---
_Source: https://npm.io/package/@alita/flow · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._