react-pitu

    1.2.0 • Public • Published

    React Pagination

    NPM

    Installation

    $ yarn add react-pitu
    
    import React, { Component } from 'react'
    import Pagination from 'react-pitu';
    import 'react-pitu/build/assets/styles/styles.css';
    
    class UserComponent extends Component {
        constructor(props) {
            super(props);
    
            this.state = {
                perPage: 10,
                totalItemCount: 0
            };
    
            this.handlePaginationChange = this.handlePaginationChange.bind(this);
        }
    
        componentDidUpdate(prevProps) {
            if (prevProps.totalCount !== this.props.totalCount) {
                this.setState({ totalItemCount: <TOTAL_ITEM_COUNT> });
            }
        }
    
        handlePaginationChange(data) {
            const { cursor, itemsPerPage } = data;
    
            // make a next http request...
        }
    
        render() {
            const { perPage, totalItemCount } = this.state;
    
            return(
                <Pagination
                    perPage={perPage}
                    total={totalItemCount}
                    onPropertyChange={this.handlePaginationChange}
                />
            );
        }
    }
    
    export default UserComponent;

    Preview (1.1.x)

    Example

    Preview (1.2.x)

    Example

    Props

    Name Type Default Description
    perPage Number 5 Items per page needs to show
    total Number Required Total items count
    perPageOptions Array [5, 10, 15] Per page options
    navImages Object Optional
    onPropertyChange Function Required. Pagination change handler.Will emit cursor and itemsPerPage

    navImages

    Name Type Default Description
    rightNavImg String pagination-right.png Path to right arrow navigation icon
    leftNavImg String pagination-left.png Path to left arrow navigation icon
    leftMostNavImg String pagination-left-most.png Path to left most arrow navigation icon
    rightMostNavImg String pagination-right-most.png Path to right most arrow navigation icon

    Install

    npm i react-pitu

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    304 kB

    Total Files

    16

    Last publish

    Collaborators

    • dilumdarshana