@ipostol/reactpagination

Simple, easy to use component for pagination. Compatible with bootstrap paginator stylesheets

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@ipostol/reactpagination
341341.0.15 years ago5 years agoMinified + gzip package size for @ipostol/reactpagination in KB

Readme

Build Status NPM
react-js-pagination
A ReactJS dumb component to render a pagination. The component comes with no built-in styles. HTML layout compatible with Bootstrap pagination stylesheets.

Installation

Install react-js-pagination with npm: ``` $ npm install react-js-pagination ```

Usage

Very easy to use. Just provide props with total amount of things that you want to display on the page. ```js import React, { Component } from "react"; import ReactDOM from "react-dom"; import Pagination from "react-js-pagination"; require("bootstrap/less/bootstrap.less"); class App extends Component { constructor(props) {
super(props);
this.state = {
activePage: 15
};
} handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({activePage: pageNumber});
} render() {
return (
<div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={10}
totalItemsCount={450}
pageRangeDisplayed={5}
onChange={::this.handlePageChange}
/>
</div>
);
} } ReactDOM.render(, document.getElementById("root")); ``` Check Live example Example

Params

Name | Type | Default | Description --- | --- | --- | --- | totalItemsCount | Number | | Required. Total count of items which you are going to display onChange | Function | | Required. Page change handler. Receive pageNumber as arg activePage | Number | 1 | Required. Active page itemsCountPerPage | Number | 10 | Count of items per page pageRangeDisplayed | Number | 5 | Range of pages in paginator, exclude navigation blocks (prev, next, first, last pages) prevPageText | String / ReactElement | | Text of prev page navigation button firstPageText | String / ReactElement | « | Text of first page navigation button lastPageText | String / ReactElement | » | Text of last page navigation button nextPageText | String / ReactElement | | Text of next page navigation button getPageUrl | Function | | Generate href attribute for page innerClass | String | pagination | Class name of <ul> tag activeClass | String | active | Class name of active <li> tag activeLinkClass | String | | Class name of active <a> tag itemClass | String | | Default class of the <li> tag itemClassFirst | String | | Class of the first <li> tag itemClassPrev | String | | Class of the previous <li> tag itemClassNext | String | | Class of the next <li> tag itemClassLast | String | | Class of the last <li> tag disabledClass | String | disabled | Class name of the first, previous, next and last <li> tags when disabled hideDisabled | Boolean | false | Hide navigation buttons (prev, next, first, last) if they are disabled. hideNavigation | Boolean | false | Hide navigation buttons (prev page, next page) hideFirstLastPages | Boolean | false | Hide first/last navigation buttons linkClass | String | | Default class of the <a> tag linkClassFirst | String | | Class of the first <a> tag linkClassPrev | String | | Class of the previous <a> tag linkClassNext | String | | Class of the next <a> tag linkClassLast | String | | Class of the last <a> tag