@vlsergey/react-bootstrap-array-pagination

React Bootstrap component to build pagination for array of items.

One-thousand-word picture

Installation

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

or

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

Usage

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

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

<ArrayPagination items={items}>
  { pageResult => <>
    {/* JSX to render limited subarray of original items */}
  </> }
<ArrayPagination>

<ArrayPagination items={items}>
  {pageResult => <>
    {pageResult.components}
    {`This is a page ${pageResult.page + 1} of size ${pageResult.size} at offset ${pageResult.offset}`}
    <ul>
      {pageResult.pageItems.map( item =>
        <li>{'This is a line for item: '}{JSON.stringify( item )}</li>
      )}
    </ul>
    {pageResult.components}
  </>}
</ArrayPagination>

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

<ArrayPagination
  defaultSize={5}
  items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}>
  {( { components, pageItems } ) => <>
    {components}<ul>
      {pageItems.map( item => <li key={item}>
        {'This is a line of item #'}{item}
      </li> )}
    </ul>{components}
  </>}
</ArrayPagination>

<ArrayPagination
  defaultPage={3}
  defaultSize={3}
  items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}
  pageProps={{ showFirstLast: false, showPrevNext: false }}
  sizeProps={{ options: [ 1, 2, 3, 4, 5 ] }}>
  {( { components, pageItems } ) => <>
    {components}<ul>
      {pageItems.map( item => <li key={item}>
        {'This is a line of item #'}{item}
      </li> )}
    </ul>{components}
  </>}
</ArrayPagination>