A pagination component for React


Keywords
react, component, pagination, status
License
MIT
Install
npm install react-pagination-status@2.0.0

Documentation

react-pagination-status

Build Status

Known Vulnerabilities

A pagination component of React let you to manage page status.

If you want use react-pagination-status with table component, maybe you can try this

Install

 npm install --save react-pagination-status

Migration

After the version 2.x, the behavior of the className prop will be a little different. For a better way to architect your CSS, the className of the specific components will be more maintainable. Such as the className of the buttons will become {prefixClassName}__btn, and the activated button will be {prefixClassName}__btn--active.

If you want to see more CSS. The example will be helpful to you.

Usage

Demo

import React from 'react';
import Pagination from 'react-pagination-status';

export default class app extends React.Component {

    constructor(props) {
        super(props);
        this.handleChangePage = ::this.handleChangePage;
        //Store activePage state into parent component
        this.state = {
            activePage: 0
        }
    }

    handleChangePage(page) {
        this.setState({
            activePage: page
        })
    }

    render() {
        const { activePage } = this.state;
        return (
            <div>
                <div>now page number: { activePage +1 }</div>
                <Pagination
                    handleChangePage = { this.handleChangePage }
                    activePage = { activePage }
                    totalCount = { 10 }
                    perPageItemCount = { 2 }
                />
            </div>
        )
    }
}

className

The react-pagination-status is the default className and prefix. You can pass custom name with the className prop.

In addition, setting the specific components to the differences styles and status by these className

  • {className}__item(the <li> tags)
  • {className}__btn(the page button)
  • {className}__btn--active(the activated page button)
  • {className}__btn--disable

API

Pagination

Props Description Type Default
handleChangePage the argument is current page function isRequired
activePage the activated page Number isRequired
totalCount the length of the items Number isRequired
perPageItemCount the numbers of the items on per page Number isRequired
nextPageText the text of nextPage button String 下一頁
prePageText the text of previousPage button String 上一頁
className the default className String react-pagination-status
partialPageCount the numbers of the page buttons Number 5

Example

npm start

By default, the example is on the 8000 port after run the command above. Then you can access localhost:8000 to see the demo.

Test

npm test

LICENSE

MIT