# effector-pagination

> Simple factory to create pagination with less boilerplate

Latest version **0.1.0** (published 2022-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install effector-pagination
pnpm add effector-pagination
yarn add effector-pagination
bun add effector-pagination
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-02-08 |
| First published | 2022-02-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 34.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Anton Kosykh |
| Maintainers | kelin2025 |

## Links

- npm: https://www.npmjs.com/package/effector-pagination
- Repository: https://github.com/kelin2025/effector-pagination
- Homepage: https://github.com/kelin2025/effector-pagination#readme
- Issues: https://github.com/kelin2025/effector-pagination/issues
- npm.io page: https://npm.io/package/effector-pagination

## Recent versions

- 0.1.0 (latest) — 2022-02-08

## README

# Effector-pagination

Simple factory to create pagination with less boilerplate

## Installation

```bash
npm install effector-pagination
```

## Usage

```tsx
export const someRequestFx = createEffect(
  (params: { limit: number; offset: number }) => {
    return {
      list: await fetch(/* ... */),
    };
  }
);

export const pagination = createPagination({
  /* Items per page. You can also pass Store<number> here */
  limit: 20,
  /* Effect that will do fetching */
  effect: someRequestFx,
  /* Convert library's page and limit into effect params */
  mapParams: ({ page, limit }) => ({ params: { limit, offset: page * limit } }),
  /* Map effect result to extract list */
  mapResult: ({ list }) => list,
});

pagination.$page; // Store<number> - Current page
pagination.$pages; // Store<Record<number, Item[]>> - All loaded items split by page numbers
pagination.$allItems; // Store<Item[]> - All loaded items combined
pagination.$canGoPrev; // Store<boolean> - Can go to the previous page?
pagination.$canGoNext; // Store<boolean> - Can go to the next page?
pagination.$pending; // Store<boolean> - Is currently pending?
pagination.goToPageFx; // Effect<{ page: number }, Item[]> - Load specific page
pagination.nextFx; // Effect<void, Item[]> - Load next page
pagination.prevFx; // Effect<void, Item[]> - Load prev page
pagination.reset; // Event<void> - Resets all the state, cleans up all loaded items
```

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