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


Views: 58

How to insert HTML in react js?

How to insert HTML in react js?



In react project sometimes need to show raw HTML content. React simply does not allow us to put raw HTML content.
In that case we need to use dangerouslySetInnerHTML dom element in order to resolve that issue. For example

render: function() {
    return (
        <div className="myClassName" dangerouslySetInnerHTML={{__html: this.state.cms_info.content}}>div>
    );
}

Please keep in mind that
dangerouslySetInnerHTML  can be dangerous if you do not know what is in the HTML string you are adding, sometimes malicious client side code can be injected via script tags.


Views: 73

Subscribe Us


Follow Us