Skip to content

dibenso/pagination-component

Repository files navigation

pagination-component npm pagination-component build

A React component that provides pagination utilities

Installation:

# npm
npm install --save pagination-component
# yarn
yarn add pagination-component

Example:

import React from "react";
import Pagination from "pagination-component";

const containerStyle = {
  backgroundColor: "black",
  padding: "10px",
  borderRadius: "10px",
  height: "100px"
};
const itemStyle = {
  float: "left",
  marginLeft: "5px",
  marginRight: "5px",
  backgroundColor: "white",
  color: "black",
  cursor: "pointer",
  width: "50px",
  textAlign: "center",
  borderRadius: "5px"
};

const Paginator = () => (
  <div style={containerStyle}>
    <Pagination initialPage={1} show={10} pageCount={1024} onChange={page => console.log(page)}>
      {({ setPage, page, index, currentPage, isPrev, isNext, isCurrentPage }) => {
        if (isPrev)
          return (
            <div style={itemStyle} onClick={() => setPage({ prev: true })}>
              Previous
            </div>
          );

        if (isNext)
          return (
            <div style={itemStyle} onClick={() => setPage({ next: true })}>
              Next
            </div>
          );

        return (
          <div
            key={index}
            style={{ ...itemStyle, backgroundColor: isCurrentPage ? "yellow" : "white" }}
            onClick={() => {
              console.log(`Navigating from page ${currentPage} to page ${page}`);
              setPage({ page });
            }}>
            <h1>{page}</h1>
          </div>
        );
      }}
    </Pagination>
  </div>
);

Pagination Props:

Prop Type Description Default
initialPage number Page to start paginating from. 1
pageCount number Total number of pages to paginate. N/A
show number Number of page controls to show at once (excluding prev and next controls). 10
onChange ((page: number) => void) | undefined Callback that receives the next current page. undefined
children (renderProps: PaginationRenderProps) => ReactNode Render props that receives PaginationRenderProps and returns a React Node (check table below for more info). undefined

Pagination render props

Render prop Type Description
setPage (options: SetPageOptions) => void Callback used to set the current page.
Examples:

setPage({ next: true }) // set current page to next page
setPage({ prev: true }) // set current page to previous page
setPage({ first: true }) // set current page to first page
setPage({ last: true }) // set current page to last page
setPage({ page: 4 }) // set current page to 4th page

Check table below for more info.
page number Indicates which page is currently being rendered.
index number Indicates the index of the page that is currently being rendered (from 0 to show - 1).
currentPage number Indicates the active page in pagination.
isCurrentPage boolean Indicates if the current page control being rendered is the active page control.
isPrev boolean Indicates if the current page control being rendered should be treated as a control to go to the previous page.
isNext boolean Indicates if the current page control being rendered should be treated as a control to go to the next page.

SetPageOptions

Option Type Description
next boolean Paginate to the next page.
prev boolean Paginate to the previous page.
first boolean Paginate to the first page.
last boolean Paginate to the last page.
page number Paginate to a specified page.

Contributing

  1. Fork it 🍴
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request 😃

For more, check out CONTRIBUTING.md