# daxus-next

> ```bash pnpm add daxus-next ```

Latest version **0.7.6** (published 2023-12-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install daxus-next
pnpm add daxus-next
yarn add daxus-next
bun add daxus-next
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.6 |
| Published | 2023-12-23 |
| First published | 2023-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 95 |
| Author | Yu Xuan |
| Maintainers | yuxuan-zheng |
| Keywords | react, data fetching, auto revalidate, pagination |

## Links

- npm: https://www.npmjs.com/package/daxus-next
- Repository: https://github.com/jason89521/daxus
- Homepage: https://github.com/jason89521/daxus#readme
- Issues: https://github.com/jason89521/daxus/issues
- npm.io page: https://npm.io/package/daxus-next

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.7.6 (latest) — 2023-12-23
- 0.7.5 — 2023-12-09
- 0.7.4 — 2023-12-09
- 0.7.1 — 2023-08-09
- 0.7.0 — 2023-08-04
- 0.6.1 — 2023-07-30
- 0.6.0 — 2023-07-28

## README

# Daxus-Next

```bash
pnpm add daxus-next
```

## Example

```tsx
import {
  ServerStateKeyProvider,
  DatabaseProvider,
  createDatabase,
  useSuspenseAccessor,
} from 'daxus';
import { StreamHydration } from 'daxus-next';
import { Suspense } from 'react';

const db = createDatabase();
const model = db.createAutoModel({ name: 'data' });
const getData = model.defineAccessor({
  name: 'getData',
  async fetchData(wait: number) {
    const data: string = await (await fetch(`/api/wait?wait=${wait}`)).json();
    return data;
  },
});

function MyComponent({ wait }: { wait: number }) {
  const { data } = useSuspenseAccessor(getData(wait));

  return <div>result: {data}</div>;
}

export default function Home() {
  return (
    <ServerStateKeyProvider>
      <DatabaseProvider database={db}>
        <StreamHydration>
          <Suspense fallback={<div>waiting 100...</div>}>
            <MyComponent wait={100} />
          </Suspense>
          <Suspense fallback={<div>waiting 200...</div>}>
            <MyComponent wait={200} />
          </Suspense>
          <Suspense fallback={<div>waiting 300...</div>}>
            <MyComponent wait={300} />
          </Suspense>
          <Suspense fallback={<div>waiting 400...</div>}>
            <MyComponent wait={400} />
          </Suspense>
          <Suspense fallback={<div>waiting 500...</div>}>
            <MyComponent wait={500} />
          </Suspense>
          <Suspense fallback={<div>waiting 600...</div>}>
            <MyComponent wait={600} />
          </Suspense>
          <Suspense fallback={<div>waiting 700...</div>}>
            <MyComponent wait={700} />
          </Suspense>

          <fieldset>
            <legend>
              combined <code>Suspense</code> container
            </legend>
            <Suspense
              fallback={
                <>
                  <div>waiting 800</div>
                  <div>waiting 900</div>
                  <div>waiting 1000</div>
                </>
              }
            >
              <MyComponent wait={800} />
              <MyComponent wait={900} />
              <MyComponent wait={1000} />
            </Suspense>
          </fieldset>
        </StreamHydration>
      </DatabaseProvider>
    </ServerStateKeyProvider>
  );
}
```

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