# sx-paginate

> Made with create-react-library

Latest version **5.0.0** (published 2022-12-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install sx-paginate
pnpm add sx-paginate
yarn add sx-paginate
bun add sx-paginate
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2022-12-31 |
| First published | 2022-12-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 27.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | suboor123 |
| Maintainers | suboorkhan, wazid_ali |
| Keywords | react, rails, mvc, react-component, pagination |

## Links

- npm: https://www.npmjs.com/package/sx-paginate
- Repository: https://github.com/suboor123/sx-paginate
- Issues: https://github.com/suboor123/sx-paginate/issues
- npm.io page: https://npm.io/package/sx-paginate

## 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

- 5.0.0 (latest) — 2022-12-31
- 4.0.3 — 2022-12-30
- 4.0.2 — 2022-12-28
- 4.0.1 — 2022-12-28
- 4.0.0 — 2022-12-25
- 3.0.2 — 2022-12-25
- 3.0.0 — 2022-12-25
- 2.0.3 — 2022-12-25
- 2.0.2 — 2022-12-25
- 2.0.1 — 2022-12-25
- 2.0.0 — 2022-12-24
- 1.0.2 — 2022-12-24
- 1.0.1 — 2022-12-24
- 1.0.0 — 2022-12-24

## README

# sx-paginate

[![NPM](https://img.shields.io/npm/v/sx-paginate.svg)](https://www.npmjs.com/package/sx-paginate) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

![Screenshot 2022-12-29 at 5 18 48 AM](https://user-images.githubusercontent.com/39632489/209886070-26795c0b-01df-4fe8-a516-8c6043bfedd4.png)

DEMO - https://stackblitz.com/edit/react-hctxyq?file=src/App.js


## Install

```bash
npm install --save sx-paginate
```

## Usage

```tsx
import React, { useState, useEffect } from 'react'

import { SxPaginate } from 'sx-paginate'
import 'sx-paginate/dist/index.css'

const App = () => {
  const [posts, setPosts] = useState([])
  const [paginatedPosts, setPaginatedPosts] = useState([])

  const onPaginate = (pageNumber: number) => {
    console.log(pageNumber)
  }

  useEffect(() => {
    (async () => {
      const res = await fetch('https://dummyjson.com/posts')
      const data = await res.json()
      setPosts(data.posts)
    })()
  }, [])

  useEffect(() => {
    console.log(paginatedPosts)
  }, [paginatedPosts])

  return (
    <>
      {paginatedPosts.map((post: any) => (
        <div key={post.id}>{post.title}</div>
      ))}

      <SxPaginate
        recordsPerPage={10}
        onPaginate={onPaginate}
        records={posts}
        setRecords={setPaginatedPosts as any}
        activeBtnStyle={{ background: 'coral' }}
      />
    </>
  )
}

export default App
```

# Options
| **Options**               | **Description**                                                   |
| ------------------------  | ----------------------------------------------------------------- |
| recordsPerPage            | Records display on the page eg. 10                                |
| records                   | Array of recrods                                                  |
| onPaginate                | functon takes paginated page number as an arguemnent (pageNumber) => {console.log(pageNumber)}|
| setRecords                | function to get paginated records                                 |
| buttonStyle ?             | CSS Properties                                                    |
| activeBtnStyle ?          | CSS Properties                                                    |
| ellipses?                 | {Boolean}  show ellipses for long pagination                      |
| activeColor               | {String} color value to chnage the background color of active page|


## License
MIT © [suboor123](https://github.com/suboor123)

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