Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/wwwaiser/react-js-pagination


https://github.com/wwwaiser/react-js-pagination

pagination react-component react-components

Last synced: 20 days ago
JSON representation

Lists

README 

        
[![Build Status](https://travis-ci.org/vayser/react-js-pagination.svg?branch=master)](https://travis-ci.org/vayser/react-js-pagination)



[![NPM](https://nodei.co/npm/react-js-pagination.png?downloads=true)](https://nodei.co/npm/react-js-pagination/)



# react-js-pagination



**A ReactJS [dumb](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) component to render a pagination.**



The component comes with no built-in styles. HTML layout compatible with [Bootstrap 3](https://getbootstrap.com/docs/3.4/components/#pagination) pagination stylesheets.



If you would like it to work for Bootstrap 4, you will need to add 2 additional props when using this component:

```

itemClass="page-item"

linkClass="page-link"

```



## Installation



Install `react-js-pagination` with [npm](https://www.npmjs.com/):



```

$ 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 (

      


        

      


    );

  }

}



ReactDOM.render(, document.getElementById("root"));



```



Check [Live example](http://vayser.github.io/react-js-pagination)



![Example](https://i.gyazo.com/9af4c2b9e20aa95a67597d3ca64efde3.png)



## 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 `