Goten Paginator for React

When we have some items we want to show, we usually create:

• A Searcher, which provides the filters for searching items.
• A List, which shows the result of said search.

For small data, this should be fine. But when working with bigger sets we get:

• Heavy payloads.
• Endless scrolling.
• Huge requirements on our backend and database.

We need a Paginator.

Installation

npm install -s goten-react-paginator

Requirements

• Your API's response or source of data must include the total elements, offset and limit.
• Your Searcher must have a method that executes the search (whatever that means in your application).
  • The search method should have two parameters: offset and limit.
  • Example,

    search(offset, limit) {
        getFromApi('/myApiURL', {offset, limit})
    }

• You can also pass a function as a prop (searchMethod) to GotenPaginator, to avoid using functions from your Searcher.

Usage

const GotenPaginator = require('goten-react-paginator') //ES5

import { GotenPaginator } from 'goten-react-paginator' //ES6

Wrap your Searcher and List components

<GotenPaginator
  totalElements={/*totalElements - a Redux variable, a state, or some other data controlling entity*/}
  offset={/*offset*/}
  limit={/*limit*/}
>
    <YourSearcher/>
    <YourList/>
</GotenPaginator>

Example of use

without goten-react-paginator

render() {
    return (
      <div className="App">
          <YourSearcher/>
          <YourList/>
      </div>
    );
  }

with goten-react-paginator

render() {
    return (
      <div className="App">
        <GotenPaginator
          totalElements={this.state.totalElements}
          offset={this.state.offset}
          limit={this.state.limit}
          buttonClassName={{
            active: "btn btn-success",
            default: "btn btn-warning",
          }}
        >
          <YourSearcher/>
          <YourList/>
        </GotenPaginator>
      </div>
    );
  }

GotenPaginator's parameters

|Prop name | Type | Description | |---|---|---| | totalElements (Required)| number | Total elements. To compute the maximum number of pages | | offset (Required)| number | Offset for working out the current page | | limit (Required)| number | Amount of elements to show| | searchMethod (Optional)| function | You can pass any function (that receives two parameters, offset and limit) to GotenPaginator. This replaces the option of using the Searcher's method | | searcherMethodName (Optional)| string | When not using the searchMethod prop, you can pass a string to specify which method from Searcher the GotenPaginator should use to search. If none passed, it defaults to 'search' | | buttonClassName (Optional)| object | this object has two styles properties active for selected page and default for the others buttons. |

Contributions

To contribute to this package, we use the following workflow:

• Add an issue with related tags to describe the contribution (is it a bug? a feature request?).
• Branch your solution from develop, naming it like #<issue_number>-<descriptive_name>.
• Send a pull request and wait for approval/corrections.