# svelte-pagination

> Svelte raw component for pagination

Latest version **0.0.1** (published 2020-09-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-pagination
pnpm add svelte-pagination
yarn add svelte-pagination
bun add svelte-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.0.1 |
| Published | 2020-09-13 |
| First published | 2020-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 107.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | thecodejack |
| Maintainers | thecodejack |
| Keywords | svelte, svelte3, svelte-components, svelte-paginate, pagination, svelte-pagination, sveltejs |

## Links

- npm: https://www.npmjs.com/package/svelte-pagination
- npm.io page: https://npm.io/package/svelte-pagination

## Recent versions

- 0.0.1 (latest) — 2020-09-13
- 0.0.1-beta.0 — 2020-07-27

## README

# svelte-pagination

[![NPM](https://img.shields.io/npm/v/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)
[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/svelte-pagination.svg)](https://www.npmjs.com/package/svelte-pagination)

Raw SvelteJS component for dynamic pagination. By applying styles, developer can acheive component in multiple forms.

## Demo

[Click here for Storybook link](https://svelte-pagination.netlify.app/)

[REPL Link](https://svelte.dev/repl/72a37aee9ae24705b7d874def7e1f270)

## Installation

```
npm install svelte-pagination

or

yarn add svelte-pagination
```

## Usage

```
<script>
  import Pagination from "svelte-pagination";

  let checkedValue = 1;

  function handleChange(e) {
    const { selected } = e.detail;
    checkedValue = selected;
  }
</script>

<Pagination
  pageCount={100}
  marginPagesDisplayed={2}
  pageRangeDisplayed={5}
  onPageChange={handleChange} />
<br />

```

## API

### Props

| Prop Name              | Description | Default Value |
| ---------------------- | ----------- | ------------- |
| pageCount              |             | 10            |
| pageRangeDisplayed     |             | 2             |
| marginPagesDisplayed   |             | 3             |
| previousLabel          |             | "Previous"    |
| nextLabel              |             | "Next"        |
| breakLabel             |             | "..."         |
| hrefBuilder            |             |               |
| initialPage            |             |               |
| forcePage              |             |               |
| disableInitialCallback |             | false         |
| containerClassName     |             |               |
| pageClassName          |             |               |
| pageLinkClassName      |             |               |
| activeClassName        |             | "selected"    |
| activeLinkClassName    |             |               |
| previousClassName      |             | "previous"    |
| nextClassName          |             | "next"        |
| previousLinkClassName  |             |               |
| nextLinkClassName      |             |               |
| disabledClassName      |             | "disabled"    |
| breakClassName         |             |               |
| breakLinkClassName     |             |               |
| extraAriaContext       |             |               |
| ariaLabelBuilder       |             |               |
| startPageIndex         |             | 1             |

### Slots

NA

### Events

| Event Name | Description | `event.detail` info        |
| ---------- | ----------- | -------------------------- |
| change     |             | `{event: event, selected}` |

### Examples

[Click here](https://github.com/thecodejack/svelte-pagination/tree/master/stories/views) to view stories implementation

## Credits

TBD

## License

MIT

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