Jt-react-pagination NPM

Super Simple React Pagination

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

build dev dependcies

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