Latest news:
Sahih al-Bukhari (সহীহ বুখারী) is a free Hadith application for android. This application is advertisement free. Download now https://play.google.com/store/apps/details?id=com.akramhossin.bukharisharif
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 : 2826
