{"id":21334893,"url":"https://github.com/vlsergey/react-bootstrap-array-pagination","last_synced_at":"2026-05-12T04:32:51.689Z","repository":{"id":42795238,"uuid":"272522202","full_name":"vlsergey/react-bootstrap-array-pagination","owner":"vlsergey","description":"React Bootstrap component to build pagination for array of items","archived":false,"fork":false,"pushed_at":"2023-03-05T00:33:34.000Z","size":1579,"stargazers_count":1,"open_issues_count":9,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-23T16:51:48.614Z","etag":null,"topics":["bootstrap","pagination","react","react-bootstrap"],"latest_commit_sha":null,"homepage":"","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/vlsergey.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}},"created_at":"2020-06-15T19:08:05.000Z","updated_at":"2023-01-31T18:17:38.000Z","dependencies_parsed_at":"2023-02-15T05:00:59.562Z","dependency_job_id":null,"html_url":"https://github.com/vlsergey/react-bootstrap-array-pagination","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-array-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-array-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-array-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vlsergey%2Freact-bootstrap-array-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vlsergey","download_url":"https://codeload.github.com/vlsergey/react-bootstrap-array-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814854,"owners_count":20352037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap","pagination","react","react-bootstrap"],"created_at":"2024-11-21T23:35:51.291Z","updated_at":"2026-05-12T04:32:51.645Z","avatar_url":"https://github.com/vlsergey.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @vlsergey/react-bootstrap-array-pagination\n\nReact Bootstrap component to build pagination for array of items.\n\n[![NPM version][npm-image]][npm-url]\n[![Build Status][travis-image]][travis-url]\n[![Downloads][downloads-image]][downloads-url]\n\n# One-thousand-word picture\n\n![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size5pageDefault.png)\n\n# Installation\n```\nnpm i --save @vlsergey/react-bootstrap-array-pagination\n```\nor\n```\nnpm i --save-dev @vlsergey/react-bootstrap-array-pagination\n```\n\n# Usage\n```jsx\nimport ArrayPagination from '@vlsergey/react-bootstrap-array-pagination';\n\nconst items = /* array of some items */;\n\n\u003cArrayPagination items={items}\u003e\n  { pageResult =\u003e \u003c\u003e\n    {/* JSX to render limited subarray of original items */}\n  \u003c/\u003e }\n\u003cArrayPagination\u003e\n\n\u003cArrayPagination items={items}\u003e\n  {pageResult =\u003e \u003c\u003e\n    {pageResult.components}\n    {`This is a page ${pageResult.page + 1} of size ${pageResult.size} at offset ${pageResult.offset}`}\n    \u003cul\u003e\n      {pageResult.pageItems.map( item =\u003e\n        \u003cli\u003e{'This is a line for item: '}{JSON.stringify( item )}\u003c/li\u003e\n      )}\n    \u003c/ul\u003e\n    {pageResult.components}\n  \u003c/\u003e}\n\u003c/ArrayPagination\u003e\n```\n\n# Props\n| Property        | Default value | Description |\n| --------------- |:-------------:| ----------- |\n| **`items`**     | *required*    | Items to paginate.                                                                        |\n| **`children`**  | *required*    | Function that specify how to render single page.                                          |\n| `defaultPage`   | `0`           | Page to display by default (0-based).                                                     |\n| `defaultSize`   | `10`          | Items to diplay on single page by default. _Should_ present in `sizeProps.options` array. |\n| `pageProps`     | `{}`          | Properties passed to instance of [`@vlsergey/react-bootstrap-pagination`](https://github.com/vlsergey/react-bootstrap-pagination) |\n| `sizeProps`     | `{}`          | Properties for page size `select` customization. So far supports only `options` property. |\n\n## `children` function argument structure\n\nThe argument of `children` function is a structure with following properties:\n| Property        | Description |\n| --------------- |------------ |\n| `components`    | Single 100%-width line (`DIV`) with pagination and page size form controls.\n| `pageItems`     | Slice of original `items` array to display on current page.\n| `offset`        | Current offset for first current page item (0-based)\n| `page`          | Current page index (0-based)\n| `size`          | Current page size\n\n# Examples\n```jsx\n\u003cArrayPagination\n  defaultSize={5}\n  items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}\u003e\n  {( { components, pageItems } ) =\u003e \u003c\u003e\n    {components}\u003cul\u003e\n      {pageItems.map( item =\u003e \u003cli key={item}\u003e\n        {'This is a line of item #'}{item}\n      \u003c/li\u003e )}\n    \u003c/ul\u003e{components}\n  \u003c/\u003e}\n\u003c/ArrayPagination\u003e\n```\n![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size5pageDefault.png)\n\n```jsx\n\u003cArrayPagination\n  defaultPage={3}\n  defaultSize={3}\n  items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}\n  pageProps={{ showFirstLast: false, showPrevNext: false }}\n  sizeProps={{ options: [ 1, 2, 3, 4, 5 ] }}\u003e\n  {( { components, pageItems } ) =\u003e \u003c\u003e\n    {components}\u003cul\u003e\n      {pageItems.map( item =\u003e \u003cli key={item}\u003e\n        {'This is a line of item #'}{item}\n      \u003c/li\u003e )}\n    \u003c/ul\u003e{components}\n  \u003c/\u003e}\n\u003c/ArrayPagination\u003e\n```\n![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size3page3.png)\n\n[npm-image]: https://img.shields.io/npm/v/@vlsergey/react-bootstrap-array-pagination.svg?style=flat-square\n[npm-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-array-pagination\n[travis-image]: https://travis-ci.com/vlsergey/react-bootstrap-array-pagination.svg?branch=master\n[travis-url]: https://travis-ci.com/vlsergey/react-bootstrap-array-pagination\n[downloads-image]: http://img.shields.io/npm/dm/@vlsergey/react-bootstrap-array-pagination.svg?style=flat-square\n[downloads-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-array-pagination\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlsergey%2Freact-bootstrap-array-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvlsergey%2Freact-bootstrap-array-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvlsergey%2Freact-bootstrap-array-pagination/lists"}