https://github.com/vlsergey/react-bootstrap-array-pagination

React Bootstrap component to build pagination for array of items
https://github.com/vlsergey/react-bootstrap-array-pagination

bootstrap pagination react react-bootstrap

Last synced: about 2 months ago
JSON representation

React Bootstrap component to build pagination for array of items

• Host: GitHub
• URL: https://github.com/vlsergey/react-bootstrap-array-pagination
• Owner: vlsergey
• License: mit
• Created: 2020-06-15T19:08:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T00:33:34.000Z (over 3 years ago)
• Last Synced: 2025-02-23T16:51:48.614Z (over 1 year ago)
• Topics: bootstrap, pagination, react, react-bootstrap
• Language: TypeScript
• Homepage:
• Size: 1.51 MB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# @vlsergey/react-bootstrap-array-pagination

React Bootstrap component to build pagination for array of items.

[![NPM version][npm-image]][npm-url]

[![Build Status][travis-image]][travis-url]

[![Downloads][downloads-image]][downloads-url]

# One-thousand-word picture

![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size5pageDefault.png)

# Installation

```

npm i --save @vlsergey/react-bootstrap-array-pagination

```

or

```

npm i --save-dev @vlsergey/react-bootstrap-array-pagination

```

# Usage

```jsx

import ArrayPagination from '@vlsergey/react-bootstrap-array-pagination';

const items = /* array of some items */;

  { pageResult => <>

    {/* JSX to render limited subarray of original items */}

  > }

  {pageResult => <>

    {pageResult.components}

    {`This is a page ${pageResult.page + 1} of size ${pageResult.size} at offset ${pageResult.offset}`}

    


      {pageResult.pageItems.map( item =>

        
{'This is a line for item: '}{JSON.stringify( item )}

      )}

    

    {pageResult.components}

  >}


```

# Props

| Property        | Default value | Description |

| --------------- |:-------------:| ----------- |

| **`items`**     | *required*    | Items to paginate.                                                                        |

| **`children`**  | *required*    | Function that specify how to render single page.                                          |

| `defaultPage`   | `0`           | Page to display by default (0-based).                                                     |

| `defaultSize`   | `10`          | Items to diplay on single page by default. _Should_ present in `sizeProps.options` array. |

| `pageProps`     | `{}`          | Properties passed to instance of [`@vlsergey/react-bootstrap-pagination`](https://github.com/vlsergey/react-bootstrap-pagination) |

| `sizeProps`     | `{}`          | Properties for page size `select` customization. So far supports only `options` property. |

## `children` function argument structure

The argument of `children` function is a structure with following properties:

| Property        | Description |

| --------------- |------------ |

| `components`    | Single 100%-width line (`DIV`) with pagination and page size form controls.

| `pageItems`     | Slice of original `items` array to display on current page.

| `offset`        | Current offset for first current page item (0-based)

| `page`          | Current page index (0-based)

| `size`          | Current page size

# Examples

```jsx

  {( { components, pageItems } ) => <>

    {components}


      {pageItems.map( item => 


        {'This is a line of item #'}{item}

      
 )}

    
{components}

  >}


```

![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size5pageDefault.png)

```jsx

  {( { components, pageItems } ) => <>

    {components}


      {pageItems.map( item => 


        {'This is a line of item #'}{item}

      
 )}

    
{components}

  >}


```

![](https://raw.githubusercontent.com/vlsergey/react-bootstrap-array-pagination/master/doc-images/size3page3.png)

[npm-image]: https://img.shields.io/npm/v/@vlsergey/react-bootstrap-array-pagination.svg?style=flat-square

[npm-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-array-pagination

[travis-image]: https://travis-ci.com/vlsergey/react-bootstrap-array-pagination.svg?branch=master

[travis-url]: https://travis-ci.com/vlsergey/react-bootstrap-array-pagination

[downloads-image]: http://img.shields.io/npm/dm/@vlsergey/react-bootstrap-array-pagination.svg?style=flat-square

[downloads-url]: https://npmjs.org/package/@vlsergey/react-bootstrap-array-pagination