react-pagination-status

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