Codxplore.com

Latest news:

Quran ul karim is a free Quran application for android. This application is advertisement free application for android smartphone. Download from https://play.google.com/store/apps/details?id=com.akramhossain.quranulkarim&hl=en

Pagination in react by react-paginate


Pagination in react by react-paginate

react-paginate is a ReactJS component to implement pagination to react js project.

By installing this component and writing only a little bit of CSS code we can accomplish pagination.

Installation:

to Install react-paginate with npm please run the following command in terminal
$ npm install react-paginate --save

Usages:

To use this feature we need to import it in top of our class as like
import ReactPaginate from 'react-paginate';

Below code will demonstrate how to make react-paginate work with a list of objects.

< ReactPaginate
                 previousLabel={'previous'}
                 nextLabel={'next'}
                 breakLabel={'...'}
                 breakClassName={'break-me'}
                 pageCount={this.state.total_pages}
                 marginPagesDisplayed={2}
                 pageRangeDisplayed={5}
                 onPageChange={this.handlePageClick.bind(this)}
                 containerClassName={'pagination'}
                 subContainerClassName={'pages pagination'}
                 activeClassName={'active'}
                 pageClassName={'page-item'}
                 pageLinkClassName={'page-link'}
                 previousClassName={'page-link'}
                 nextClassName={'page-link'}
                 hrefBuilder={this.buildPaginateHref}
/ >

Read full documentation here https://www.npmjs.com/package/react-paginate

Tags : javascript, React,

Views : 2135

Subscribe Us


Follow Us