Codxplore.com

Latest news:

New android application Islamic Video has been released. its a free islamic video application for android smartphone. Download now!

Pagination in react by react-paginate


Pagination in react by react-paginate

react-paginate

A ReactJS component to render a pagination.

By installing this component and writing only a little bit of CSS you can obtain this:

Installation:

Install react-paginate with npm:

$ npm install react-paginate --save

To use this we need to import it
 

import ReactPaginate from 'react-paginate';

You will quickly understand how to make react-paginate work with a list of objects by below code.

< 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 : 88

Subscribe Us


Follow Us