moo-react-pagination

MOO Pagination Component for React

Pagination Component for React.js. View example here.

Getting started

1. Install package npm install moo-react-pagination.
2. Import package into project file with import {Paginate} from 'moo-react-pagination';
3. Use Component in project. Here is an example:

import React from 'react';
import {Paginate} from 'moo-react-pagination';
import {sigthings} from './data';
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      perPage: 5,
      offset: 0,
      end: 5,
    };
  }
  handleClick(pagination) {
    let {page, offset, end} = pagination;
    this.setState({
      page,
      offset,
      end,
    });
  }
  render() {
    let {offset, end} = this.state;
    let birds = sigthings.slice(offset, end).map((bird, index) => {
      return (
        <tr key={index}>
          <td>{bird.Species.ScientificName}</td>
          <td>{bird.Species.AcceptedCommonName}</td>
          <td>{bird.SightingRecords}</td>
        </tr>
      );
    });
    return (
      <div>
        <Paginate
          className="pagination"
          count={sigthings.length}
          initialPage={this.state.page}
          numberCells={7}
          perPage={this.state.perPage}
          onClick={this.handleClick.bind(this)} />
        <table className="birds table">
          <thead>
            <tr>
              <th>Scientific Name</th>
              <th>Common Name</th>
              <th># Sightings</th>
            </tr>
          </thead>
          <tbody>
            {birds}
          </tbody>
        </table>
      </div>
    );
  }
}
 
React.render(<App />, document.getElementById('moo-react-pagination'));

API Documentation

count

Length of data.

propType	isRequired	defaultProp
Number	false	0

initialPage

Initial start page.

propType	isRequired	defaultProp
Number	false	1

labels

Overwrite default label values.

Example:

<Paginate
  count={100}
  labels={{first: '<<', prev: '<', next: '>', last: '>>'}} />

propType	isRequired
Object	false

numberCells

Number of numbered page cells to show in pagination list.

propType	isRequired	defaultProp
Number	false	8

perPage

Results per page.

propType	isRequired	defaultProp
Number	false	10

Customize Moo Pagination for React

1. Clone this repository.
2. Run npm install.
3. Start hacking.
4. Recompile by running npm run compile.

Run Tests

Run npm test.

Note: test uses JSDOM which requires io.js