tiny-custom-pagination
React pagination easy customize component.
Last updated 2 years ago by freedom9x .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install tiny-custom-pagination 
SYNC missed versions from official npm registry.

React pagination easy customize component.

react-pagination-custom

npm version(https://www.npmjs.com/package/tiny-custom-pagination)

TinyPagination is a best customizable tiny component you can find. It only handle logic, and you feel free for edit styles of number buttons, wrap container, spread,....

Notes

Installation

npm install react-pagination-custom --save

Properties

Name Required? Type Description
total Yes Number Total of item list
selectedPageId Yes Number Selected page number
itemPerPage Yes Number Maximum item per one page
renderBtnNumber Yes Function Function return your customize button number component
maxBtnNumbers Yes Number Maximum buttons number will be show. If total of buttons is more than, buttons will bi collapse
preKey Yes String Key of previous button
nextKey Yes String Key of next button
wrapStyle No Object Style of root container
wrapClass No String Class of root container
counterClass No String Class of counter container
counterStyle No String Style of counter container
btnsClass No Object Class of buttons container
btnsStyle No String Style of buttons container
spreadClass No String Class of spread container
spreadStyle No Object Style of spread container

Usage

App.js

import {TinyPagination} from 'react-pagination-custom'
....
....
<TinyPagination
    total = {...}
    selectedPageId = {...}
    itemPerPage = {...}
    renderBtnNumber = {...}
    maxBtnNumbers = {...}
    preKey = '...'
    nextKey = '...'
    {...someOptionalProperties}
/>

Demo:

Demo

Example

import React from 'react'
import TinyPagination from 'tiny-custom-pagination'
import './App.css'
class App extends React.Component {

  constructor(props){
    super(props);
    this.state = {...props};
    this.changePage = this.changePage.bind(this);
    this.renderBtnNumber = this.renderBtnNumber.bind(this);
  }

  changePage(id){
    this.setState((prevState, props) => { 
      return { 
        ...prevState,
        selectedPageId: id 
       }
    });    
  }

  buttonPageClick(id){
    let {selectedPageId} = this.state;
    switch (id) {
      case 'PRE':
        this.changePage(selectedPageId - 1);
        break;
      case 'NEXT':
        this.changePage(selectedPageId + 1);
        break;
      default:
        this.changePage(id);
        break;
    }
  }

  renderBtnNumber(id){
    let {selectedPageId} = this.state;
    return(
      <button
        onClick = {this.buttonPageClick.bind(this, id)}
        key = {id}
        className = {`page ${selectedPageId === id? 'selected-page' : ''}`}
      >
        {id}
      </button>
    );
  }

  render() {
    let {selectedPageId, list} = this.state;
    const itemPerPage = 5;
    const maxBtnNumbers = 6;
    let listShow = [...list];
    listShow = listShow.splice((selectedPageId - 1) * itemPerPage, itemPerPage);
    return (
      <div>
        <ul>
          {listShow.map(i => <li key={i.name}> {i.name}</li>)}
        </ul>
        <TinyPagination
          total = {list.length}
          selectedPageId = {selectedPageId}
          itemPerPage = {itemPerPage}
          renderBtnNumber = {this.renderBtnNumber}
          maxBtnNumbers = {maxBtnNumbers}
          preKey = 'PRE'
          nextKey = 'NEXT'
          wrapStyle = {{backgroundColor: '#ffffff'}}
          wrapClass = 'page-container'
          btnsClass = 'btns-container'
          counterClass = 'counter-container'
          counterStyle = {{color: 'gray'}}
          spreadClass = 'spread-container'
          spreadStyle = {{padding: '0 5px'}}
        />
      </div>
    )
  }
}

App.defaultProps = {
  selectedPageId: 1,
  list: [
    {name: 'item 1'},{name: 'item 2'},{name: 'item 3'},{name: 'item 4'},{name: 'item 5'},{name: 'item 6'},{name: 'item 7'},{name: 'item 8'},{name: 'item 9'},{name: 'item 10'},{name: 'item 11'},{name: 'item 12'},{name: 'item 13'},{name: 'item 14'},{name: 'item 15'},{name: 'item 16'},{name: 'item 17'},{name: 'item 18'},{name: 'item 19'},{name: 'item 20'},{name: 'item 21'},{name: 'item 22'},{name: 'item 23'},{name: 'item 24'},{name: 'item 25'},{name: 'item 26'},{name: 'item 27'},{name: 'item 28'},{name: 'item 29'},{name: 'item 30'},{name: 'item 31'},{name: 'item 32'},{name: 'item 33'},{name: 'item 34'},{name: 'item 35'},{name: 'item 36'},{name: 'item 37'},{name: 'item 38'},{name: 'item 39'},{name: 'item 40'},{name: 'item 41'},{name: 'item 42'},{name: 'item 43'},{name: 'item 44'},{name: 'item 45'},{name: 'item 46'},{name: 'item 47'},{name: 'item 48'}
  ],
}

export default App

App.css

.page{
  padding: 5px;
  margin: 5px;
}

.page.selected-page{
  background-color: gray;
  color: white;
}

Contributing

Updating...

License

MIT

Current Tags

  • 1.0.5                                ...           latest (2 years ago)

4 Versions

  • 1.0.5                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 1
Last Month 4
Dev Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |