mui-pagination

mui-pagination

:one::two::three:

A pagination component for React built with material-ui. Makes use of ToggleButton with pagination-generator-js by Zarko Selak.

Install

$ npm i -S mui-pagination
# or with yarn 
$ yarn add mui-pagination

Usage

import React, { Component } from 'react'
import Pagination from 'mui-pagination'
 
class PaginatedList extends Component {
  state = {
    page: 1,
    totalItems: 100,
    itemsPerPage: 10
  }
 
  handlePageChange (page) {
    this.setState({ page })
  }
 
  render () {
    const { page, totalItems, itemsPerPage } = this.state
    return (
      <div>
        {/* items */}
        <Pagination
          page={page}
          totalItems={totalItems}
          itemsPerPage={itemsPerPage}
          onChange={(e, val) => this.handlePageChange(val)}
        />
      </div>
    )
  }
}

API

Props*
totalItems {Number} *
Total number of items.

itemsPerPage {Number} *
Items to show on each page.

page {Number} *
Current page number.

Author

Ismail Demirbilek - @dbtek