React Paginating
Simple lightweight pagination component.
The component applied Function as Child Components pattern. (You can read more about this pattern here).
This approach allows you to fully control UI component and behaviours.
Table content
Installation
npm install --save react-paginatingor
yarn add react-paginatingUsage
You can check out the basic demo here:
- Javascript: https://codesandbox.io/s/z2rr7z23ol
- Typescript: https://codesandbox.io/s/9252p34v8r
- Server-Side Rendering: https://codesandbox.io/s/vq40kw1yn5
import React from 'react'; import { render } from 'react-dom'; import Pagination from 'react-paginating'; const fruits = [ ['apple', 'orange'], ['banana', 'avocado'], ['coconut', 'blueberry'], ['payaya', 'peach'], ['pear', 'plum'] ]; const limit = 2; const pageCount = 3; const total = fruits.length * limit; class App extends React.Component { constructor() { super(); this.state = { currentPage: 1 }; } handlePageChange = (page, e) => { this.setState({ currentPage: page }); }; render() { const { currentPage } = this.state; return ( <div> <ul> {fruits[currentPage - 1].map(item => <li key={item}>{item}</li>)} </ul> <Pagination total={total} limit={limit} pageCount={pageCount} currentPage={currentPage} > {({ pages, currentPage, hasNextPage, hasPreviousPage, previousPage, nextPage, totalPages, getPageItemProps }) => ( <div> <button {...getPageItemProps({ pageValue: 1, onPageChange: this.handlePageChange })} > first </button> {hasPreviousPage && ( <button {...getPageItemProps({ pageValue: previousPage, onPageChange: this.handlePageChange })} > {'<'} </button> )} {pages.map(page => { let activePage = null; if (currentPage === page) { activePage = { backgroundColor: '#fdce09' }; } return ( <button {...getPageItemProps({ pageValue: page, key: page, style: activePage, onPageChange: this.handlePageChange })} > {page} </button> ); })} {hasNextPage && ( <button {...getPageItemProps({ pageValue: nextPage, onPageChange: this.handlePageChange })} > {'>'} </button> )} <button {...getPageItemProps({ pageValue: totalPages, onPageChange: this.handlePageChange })} > last </button> </div> )} </Pagination> </div> ); } } render(<App />, document.getElementById('root'));Examples
Input Props
total
number
Total results
limit
number
Number of results per page
pageCount
number
How many pages number you want to display in pagination zone.
currentPage
number
Current page number
Child callback functions
getPageItemProps
function({ pageValue: number, onPageChange: func })
Allow to pass props and event to page item. When page is clicked, onPageChange will be executed with param value pageValue.
Note: This callback function should only use for paging with state change. If you prefer parsing page value from query url (Please don't use this callback function).
Controlled Props
pages
array: [number]
List of pages number will be displayed. E.g: [1, 2, 3, 4, 5]
currentPage
number
previousPage
number
nextPage
number
totalPages
number
hasNextPage
boolean
Check if it has next page or not.
hasPreviousPage
boolean
Check if it has previous page or not.
Alternatives
If you don’t agree with the choices made in this project, you might want to explore alternatives with different tradeoffs. Some of the more popular and actively maintained ones are:
