# @kodiak-ui/pagination

> Kodiak UI's pagination components for GraphQL cursor based pagination

Latest version **0.2.42** (published 2022-08-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @kodiak-ui/pagination
pnpm add @kodiak-ui/pagination
yarn add @kodiak-ui/pagination
bun add @kodiak-ui/pagination
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.42 |
| Published | 2022-08-04 |
| First published | 2020-06-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Wesley Cole |
| Maintainers | wesleymcole, justinstern, asseti6, maxrice, alexanderchan, anht |
| Keywords | pagination, graphql, react |

## Links

- npm: https://www.npmjs.com/package/@kodiak-ui/pagination
- Repository: https://github.com/skyverge/kodiak-ui
- Homepage: https://github.com/skyverge/kodiak-ui#readme
- Issues: https://github.com/skyverge/kodiak-ui/issues
- npm.io page: https://npm.io/package/@kodiak-ui/pagination

## Dependencies (2)

- [@kodiak-ui/utils](https://npm.io/package/@kodiak-ui/utils.md) ^0.0.9
- [@kodiak-ui/primitives](https://npm.io/package/@kodiak-ui/primitives.md) ^0.21.21

## 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.2.42 (latest) — 2022-08-04
- 0.2.24-alpha.7 (canary) — 2021-01-28
- 0.2.32 — 2021-09-23
- 0.2.31 — 2021-09-23
- 0.2.30 — 2021-09-01
- 0.2.29 — 2021-08-23
- 0.2.28 — 2021-08-10
- 0.2.27 — 2021-07-05
- 0.2.26 — 2021-06-01
- 0.2.25 — 2021-02-24
- 0.2.24 — 2021-02-08
- 0.2.24-alpha.6 — 2021-01-28
- 0.2.24-alpha.5 — 2021-01-28
- 0.2.24-alpha.4 — 2021-01-28
- 0.2.24-alpha.2 — 2021-01-28
- … 46 more at https://npm.io/package/@kodiak-ui/pagination/versions

## README

<p align="center">
  <a href="https://skyverge.com">
    <img src="https://user-images.githubusercontent.com/1162694/74063113-c6bad100-49bd-11ea-982d-3c4b17df80ab.png" alt="SkyVerge" />
  </a>
</p>

<p align="center">Themable component library and utility hooks for React</p>

[![SkyVerge](https://circleci.com/gh/skyverge/kodiak-ui.svg?style=svg)](https://circleci.com/gh/skyverge/kodiak-ui)
[![Known Vulnerabilities](https://snyk.io/test/github/skyverge/kodiak/badge.svg)](https://snyk.io/test/github/skyverge/kodiak)
[![CodeFactor](https://www.codefactor.io/repository/github/skyverge/kodiak-ui/badge)](https://www.codefactor.io/repository/github/skyverge/kodiak-ui)

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-5-orange.svg?style=flat-square)](#contributors-)

<!-- ALL-CONTRIBUTORS-BADGE:END -->

## Intro

Kodiak UI is a set of primitive and complex components and React hooks for building applications. It is used and built by the fine folks at [SkyVerge](https://skyverge.com) on [Jilt](https://jilt.com) and other products.

All components are built on the [Theme UI](https://theme-ui.com/) and [Styled System](https://styled-system) libraries to build applications on constraint-based design principles. All components accept the styled-system style props for quick and consistent styling based upon the Theme UI theme specification.

Kodiak hooks are small, reusable, and well tested to provide the most consistent approach to manipulating state, data, and side effects.

## Get started

```
// Install primitive components
yarn add @kodiak-ui/primitives react react-dom theme-ui

// Install hooks
yarn add @kodiak-ui/hooks react react-dom
```

All complex components (i.e. Dropdown, Combobox, Accordion) are separate packages and will need to be installed as needed.

```
yarn add @kodiak-ui/dropdown
```

Once primitive components or a complex component have been installed, create a theme object to match the design of your application.

```js
// example theme.js
export default {
  fonts: {
    body: 'system-ui, sans-serif',
    heading: '"Avenir Next", sans-serif',
    monospace: 'Menlo, monospace',
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#33e',
  },
}
```

Finally, just like in Emotion or Styled Components, you need to wrap your application with Theme UI's ThemeProvider component.

```jsx
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
export default props => (
  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
)
```

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://twitter.com/alexandermchan"><img src="https://avatars2.githubusercontent.com/u/1864372?v=4" width="100px;" alt=""/><br /><sub><b>Alex Chan</b></sub></a><br /><a href="https://github.com/skyverge/kodiak-ui/commits?author=alexanderchan" title="Code">💻</a> <a href="#ideas-alexanderchan" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-alexanderchan" title="Maintenance">🚧</a> <a href="https://github.com/skyverge/kodiak-ui/pulls?q=is%3Apr+reviewed-by%3Aalexanderchan" title="Reviewed Pull Requests">👀</a></td>
    <td align="center"><a href="https://jilt.com"><img src="https://avatars0.githubusercontent.com/u/1162694?v=4" width="100px;" alt=""/><br /><sub><b>Wesley Cole</b></sub></a><br /><a href="https://github.com/skyverge/kodiak-ui/commits?author=wesleycole" title="Code">💻</a> <a href="#ideas-wesleycole" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-wesleycole" title="Maintenance">🚧</a> <a href="https://github.com/skyverge/kodiak-ui/pulls?q=is%3Apr+reviewed-by%3Awesleycole" title="Reviewed Pull Requests">👀</a></td>
    <td align="center"><a href="https://github.com/TAYTS"><img src="https://avatars0.githubusercontent.com/u/29126748?v=4" width="100px;" alt=""/><br /><sub><b>TAY TS</b></sub></a><br /><a href="https://github.com/skyverge/kodiak-ui/commits?author=TAYTS" title="Tests">⚠️</a></td>
    <td align="center"><a href="https://github.com/lukasslivko"><img src="https://avatars1.githubusercontent.com/u/72021800?v=4" width="100px;" alt=""/><br /><sub><b>lukasslivko</b></sub></a><br /><a href="https://github.com/skyverge/kodiak-ui/commits?author=lukasslivko" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/binkpitch"><img src="https://avatars0.githubusercontent.com/u/20456165?v=4" width="100px;" alt=""/><br /><sub><b>Bink</b></sub></a><br /><a href="https://github.com/skyverge/kodiak-ui/commits?author=binkpitch" title="Tests">⚠️</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

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