{"id":48483831,"url":"https://github.com/stainless-code/react-paginate","last_synced_at":"2026-04-07T09:03:36.729Z","repository":{"id":263600904,"uuid":"890351286","full_name":"stainless-code/react-paginate","owner":"stainless-code","description":"Elegantly handle client-side pagination in React","archived":false,"fork":false,"pushed_at":"2024-11-22T15:43:29.000Z","size":109,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-11T07:59:16.596Z","etag":null,"topics":["paginate","pagination","react","use-paginate"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@stainless-code/react-paginate","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stainless-code.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-18T12:27:09.000Z","updated_at":"2025-09-08T11:35:22.000Z","dependencies_parsed_at":"2024-11-19T12:59:51.450Z","dependency_job_id":"4e269f18-4ca5-49fd-b59b-f5798ad5240c","html_url":"https://github.com/stainless-code/react-paginate","commit_stats":null,"previous_names":["stainless-code/react-paginate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stainless-code/react-paginate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Freact-paginate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Freact-paginate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Freact-paginate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Freact-paginate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stainless-code","download_url":"https://codeload.github.com/stainless-code/react-paginate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stainless-code%2Freact-paginate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31506593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["paginate","pagination","react","use-paginate"],"created_at":"2026-04-07T09:03:31.942Z","updated_at":"2026-04-07T09:03:36.724Z","avatar_url":"https://github.com/stainless-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @stainless-code/react-paginate\n\nHandle client-side pagination effortlessly. Simplifies the process of paginating data in your React applications, offering a fully type-safe and feature-rich experience.\n\n## Features\n\n- **Customizable Pagination**: Control the page size, initial page, and thresholds with ease.\n- **Performance Optimized**: Uses React's `useMemo` to optimize calculations.\n- **Type-safe**: Full TypeScript support for better developer experience.\n- **Flexible API**: Exposes powerful utilities to navigate and manipulate pagination state.\n\n## Installation\n\n### npm\n\n```bash\nnpm install @stainless-code/react-paginate\n```\n\n### yarn\n\n```bash\nyarn add @stainless-code/react-paginate\n```\n\n### pnpm\n\n```bash\npnpm add @stainless-code/react-paginate\n```\n\n### bun\n\n```bash\nbun add @stainless-code/react-paginate\n```\n\n## Usage\n\nHere's a basic example of using `usePaginate`:\n\n```tsx\nimport { usePaginate } from \"@stainless-code/react-paginate\";\nimport React from \"react\";\n\nconst Example = () =\u003e {\n  const items = Array.from({ length: 50 }, (_, i) =\u003e `Item ${i + 1}`);\n  const {\n    page,\n    pageSize,\n    pageIndex,\n    pageCount,\n    canNextPage,\n    canPrevPage,\n    nextPage,\n    prevPage,\n    changePageSize,\n  } = usePaginate(items, { initialPageSize: 10, initialPageIndex: 0 });\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003ePagination Example\u003c/h1\u003e\n      \u003cul\u003e\n        {page.map((item, idx) =\u003e (\n          \u003cli key={idx}\u003e{item}\u003c/li\u003e\n        ))}\n      \u003c/ul\u003e\n      \u003cdiv\u003e\n        \u003cbutton onClick={prevPage} disabled={!canPrevPage}\u003e\n          Previous\n        \u003c/button\u003e\n        \u003cbutton onClick={nextPage} disabled={!canNextPage}\u003e\n          Next\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cp\u003e\n        Page {pageIndex + 1} of {pageCount}\n      \u003c/p\u003e\n      \u003clabel\u003e\n        Items per page:{\" \"}\n        \u003cselect\n          value={pageSize}\n          onChange={(e) =\u003e changePageSize(Number(e.target.value))}\n        \u003e\n          \u003coption value={5}\u003e5\u003c/option\u003e\n          \u003coption value={10}\u003e10\u003c/option\u003e\n          \u003coption value={25}\u003e25\u003c/option\u003e\n        \u003c/select\u003e\n      \u003c/label\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Example;\n```\n\n## Typesafety\n\nThis library is built with TypeScript and offers full type-safety. All APIs and returned values are strongly typed, ensuring a great developer experience and reducing runtime errors.\n\n## API\n\n### `usePaginate(items: T[], options?: UsePaginateOptions)`\n\n#### Parameters\n\n| Parameter                  | Type     | Default | Description                                            |\n| -------------------------- | -------- | ------- | ------------------------------------------------------ |\n| `items`                    | `T[]`    | -       | The list of items to paginate.                         |\n| `options`                  | `object` | `{}`    | Configuration options for pagination.                  |\n| `options.initialPageSize`  | `number` | `25`    | Initial number of items per page.                      |\n| `options.initialPageIndex` | `number` | `0`     | Initial page index.                                    |\n| `options.threshold`        | `number` | `0`     | Minimum number of items required to enable pagination. |\n\n#### Returns\n\n| Property         | Type                      | Description                                           |\n| ---------------- | ------------------------- | ----------------------------------------------------- |\n| `page`           | `T[]`                     | The current page of items.                            |\n| `pageSize`       | `number`                  | The number of items per page.                         |\n| `pageIndex`      | `number`                  | The current page index.                               |\n| `pageCount`      | `number`                  | Total number of pages.                                |\n| `canNextPage`    | `boolean`                 | Whether navigation to the next page is possible.      |\n| `canPrevPage`    | `boolean`                 | Whether navigation to the previous page is possible.  |\n| `nextPage`       | `() =\u003e void`              | Navigate to the next page.                            |\n| `prevPage`       | `() =\u003e void`              | Navigate to the previous page.                        |\n| `firstPage`      | `() =\u003e void`              | Navigate to the first page.                           |\n| `lastPage`       | `() =\u003e void`              | Navigate to the last page.                            |\n| `changePage`     | `(index: number) =\u003e void` | Change to a specific page by index.                   |\n| `changePageSize` | `(size: number) =\u003e void`  | Change the number of items per page.                  |\n| `resetPage`      | `() =\u003e void`              | Reset to the first page.                              |\n| `shouldPaginate` | `boolean`                 | Whether pagination is enabled based on the threshold. |\n\n---\n\n### `paginate\u003cT\u003e(items: T[], pageSize: number, pageIndex: number): T[]`\n\nThis function divides the given list of items into pages, and returns the items for the specified page.\n\n- **`items`**: An array of items (type `T[]`) that you want to paginate.\n- **`pageSize`**: The number of items per page.\n- **`pageIndex`**: The zero-based index of the page to return.\n\n**Example Usage**:\n\n```typescript\nconst items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst pageSize = 3;\nconst pageIndex = 2;\n\nconst pageItems = paginate(items, pageSize, pageIndex);\n// Output: [7, 8, 9]\n```\n\n---\n\n### `getPageCount\u003cT\u003e(items: T[], pageSize: number): number`\n\nThis function calculates the total number of pages required to paginate the given list of items, based on the page size.\n\n- **`items`**: An array of items (type `T[]`) to paginate.\n- **`pageSize`**: The number of items per page.\n\n**Example Usage**:\n\n```typescript\nconst items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst pageSize = 3;\n\nconst totalPages = getPageCount(items, pageSize);\n// Output: 4\n```\n\n## Contributing\n\nFeel free to submit issues or pull requests to improve the library. Every bit of help is appreciated. 💖\n\n[Read the contribution guidelines](./CONTRIBUTING.md).\n\n## License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstainless-code%2Freact-paginate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstainless-code%2Freact-paginate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstainless-code%2Freact-paginate/lists"}