@bazhe/pagination-wrapper

React Wrapper Component for handling your pagination

Playground/Demo: https://blagoj5.github.io/pagination/#playground
Full documentation: https://blagoj5.github.io/pagination

Getting Started

Prerequisites

You need to have react-dom and react above version 16

"react": ">=16.0.0",
"react-dom": ">=16.0.0"

Installing

npm

npm install @bazhe/pagination-wrapper

yarn

yarn add @bazhe/pagination-wrapper

Usage

Typescript usage example in: https://github.com/Blagoj5/pagination/blob/main/example/components/pagination-wrapper-demo.tsx

Import

import { Pagination } from '@bazhe/pagination-wrapper';

Initialization

Syntax: <Pagination paginationOptions={paginationOptions} render={WrappedComponent} />
or
Syntax: <Pagination
paginationOptions={paginationOptions}>
{(paginationResult) => (<WrappedComponent {...paginationResult} />)}
</Pagination>

Returns: PaginationResult as props to the wrapped component (if render method is used) or as the first argument in the children callback function

const Playground = (props) => {
    return <pre>{JSON.stringify(props.paginationResult, null, 2)}</pre>
}


const fakeData = [1, 2, 3]

export const PaginationWrapper = () => {
  // With children callback
  return (
    <Pagination paginationOptions={{ items: fakeData, limit: 2 }}>
      {props => <Playground {...props} />}
    </Pagination>
  );

  // Another example with callback
  return (<Pagination paginationOptions={{items: fakeData, limit: 2}}>
    {({nextPage, paginationResult, previousPage, setCurrentPage, setItems }) => {
      // do something with the data from above
      // ...
      return null; // return anything / JSX ... / string etc...
    }
  </Pagination>)

   //   With render prop
  return (
    <Pagination paginationOptions={{ items, limit: 2 }} render={Playground} />
  );
};

API

Props

| Name | Type | Description | | ----------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | render | React.ComponentType<PaginationResults<I & Props>> | The wrapped component that will be rendered with the pagination result passed as props | | children | children?: (paginationData: PaginationResults<I & Props>) => any | The wrapped component that will be rendered with the pagination result passed to props | | props | any | Parent props you want to pass when you are using render method for getting pagination result. It merges existing props with pagination result and passes them to the component provided in render | | paginationOptions | PaginatorOptions<I> | Options for handling the pagination logic |

Pagination Options

| Name | Type | Default | Description | | ------------ | ------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ | | items | T[] | undefined | [] | Initial items for the pagination | | limit | number | undefined | 4 | The limit of items per page | | currentPage | number | undefined | 1 | The current page | | links | number | undefined | 10 | Links is the number of pages/links/buttons to display. Example: How many buttons you want to show in the pagination bar? | | totalResults | number | undefined | items.length | Total results is the maximum number of items. Usually refers to items.length (so there's no need to pass it) |

Pagination Result/Return

The pagination result passed to the children callback or the pagination props passed to the wrapped component (when using render prop):

• paginationResult:

| Name | Type | Description | | ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | | items | T[] | undefined | The items that will change depending on the pagination (currentPage, limit ...) | | all_items | T[] | undefined | Initial/All items for the pagination | | total_pages | number | undefined | The total pages for the provided items. Example: 12 items with limit 2 -> 6 total pages | | pages | number | The number of pages between range(first_page, last_page) | | current_page | number | Current page | | first_page | number | First page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page) | | last_page | number | Last page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page) | | previous_page | number | Previous page, current_page - 1 | | next_page | number | Next page, current_page + 1 | | has_previous_page | boolean | | has_next_page | boolean | | total_results | number | The length of the initial items | | results | number | Results per page | | first_result | number | First result is the index of the item that's first for the current page - items[first_result] (depends on link and limit) | | last_result | number | Last result is the index of the item that's last for the current page - items[last_result] (depends on link and limit) | | limit | number | The limit of items per page |

• Pagination handlers for managing state

| Name | Type | Description | | --------------- | ------------------------------------------------------ | ------------------------------------------------------------------- | | setCurrentPage | (n: number) => void | Function handler for changing the current page | | setItems | (items: T[]) => void | Function handler for changing the items | | setPageAndItems | (payload: { items: I[]; currentPage: number }) => void | Function handler for changing current page and the items themselves | | nextPage | () => void | Function handler for changing to next page | | previousPage | () => void | Function handler for changing to previous page |

Built With

Depends on:

• @bazhe/use-pagination - Used usePagination hook for the pagination logic
• @bazhe/paginator - The utilities used

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Blagoj Petrov

Security

This project doesn’t have any security concerns.

License

This project is licensed under the MIT License - see the LICENSE.md file for details