reactive-pagination

React Component to provide pagination for your application. It comes with not just a basic layout but also provides some built in custom designs for your application.

Installation

npm install reactive-pagination --save

Usage

import React, { Component } from "react";

import Pagination from "reactive-pagination";
import "reactive-pagination/dist/index.css";

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activePage: 1,
    };
  }

  handlePageChange = (pageNum) => {
    this.setState({
      activePage: pageNum,
    });
  };

  render() {
    const { activePage } = this.state;

    return (
      <Pagination
        activePage={activePage}
        itemsCountPerPage={10}
        totalItemsCount={400}
        delimeter={10}
        onChange={this.handlePageChange}
        styling="default"
      />
    );
  }
}

Params

| Name | Type | Default | Required | Description | | ----------------- | -------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------ | | activePage | Number | 1 | True | Currently Active Page in Pagination | | totalItemsCount | Number | | True | Total count of items which you are going to display | | onChange | Function | | True | Page change handler function. Receives pageNum as argument. | | itemsCountPerPage | Number | 10 | False | Total items to display in single page | | delimeter | Number | 5 | False | Number of pages in paginator, excluding navigation blocks (prev, next, first, last pages) | | styling | String | default | False | Defines different style guides for pagination. Possible params are: default, borderless, primary, rounded, rounded_primary |

Examples

Default

Borderless

Primary

Rounded

Rounded Primary

License

MIT © Free Software, Hell Yeah!