react-js-pagination

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 "../components/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(<App />, document.getElementById("root")); Check Live example Example

Params

Name | Type | Default | Description — | — | — | — | totalItemsCount | Number | | Total count of items which you are going to display onChange | Function | | Page change handler. Receive pageNumber as arg activePage | Number | 1 | 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 innerClass | String | pagination | Class name of <ul> tag activeClass | String | active | Class name of active <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 page, next page) if they are disabled.

Related Repositories

spicy-datatable

spicy-datatable

React.js datatables without jQuery. Smart react datatable that includes search, pagination and localization. ...