Super Simple React Pagination

Painfully simply pagination with React Simple react pagination that anyone can reuse on multiple projects :)

View Demo

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Literally nothing is required. This component has no dependencies. Its bare bones for a reason. Behold:

<Pagination>
  {items}
</Pagination>

Installing

Install this component locally in your react project

npm i jt-react-pagination --save

Import in your app

import Pagination from 'jt-react-pagination';

Use in your render

<Pagination
  prevText='<'
  nextText='>'
  pageNeighbours={2}>
  {Array.from(Array(754).keys()).map((item, idx) => (
    <p key={idx}>{ item }</p>
  ))}
</Pagination>

Props

| Prop Name | Desc | Prop Type | Default | |------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|------------| | className | Custom class to apply for styling | string | '' | | itemPerPage | How many items should be displayed per page | number | 10 | | pageNeighbours | How many siblings should the selected (center) page have? [1 < 4 5 [6] 7 8 > 103] // 2 Neighbours [1 < 5 [6] 7 > 103] // 1 Neighbours [1 < 3 4 5 [6] 7 8 9 > 103] // 3 Neighbours | number | 1 | | prevText | The prev button text | [string, node] | 'Prev' | | nextText | The next button text | [string, node] | 'Next' | | paginationBefore | Renders the pagination above the children as well for long pages | bool | false | | children | Required The children element to render in pages | [function, node[]] | onPageUpdate | Event when the page changes, arg = page # | function

Running the tests

Coming soon

Contributing

All issues, pull requests, suggestions and comments are welcome.

Authors

• John Tendik - Initial work - The Real JT

License

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

Acknowledgments

• Hat tip to anyone whose code was used, I believe someone from stack overflow for the pagination algo. Thanks sir.