react-select-paginate v0.1.4

React Select Paginate

A very simple, bare-bones React.js pagination component using a select element.

To install:

$ npm install react-select-paginate --save

To use:

import React from 'react';
import SelectPaginate from 'react-select-paginate';

class MyPaginatedApp extends React.Component {
    onPageChange(page) {
        console.log('page changed to: ' + page);
    }
    
    render() {
        <SelectPaginate
            pageNum={100}
            handlePageChange={onPageChange} />
    }
}

SelectPaginate only requires a pageNum, which is the number of pages and a handlePageChange event listener that will be called whenever the user selects a page or clicks the next/prev buttons.

But you can also pass in a custom label for the next/prev buttons, you could even pass in a custom component that will get rendered inside a button element. To do this, simple specify the prevLabel and nextLabel props.

Note

SelectPaginate is zero indexed but displays as one indexed. That means the handlePageChange event will return a an item from a zero indexed pageNum lengthed array but the actual select element starts at one. Just a reminder.