@gemcook/pagination NPM

@gemcook/pagination

React Pagination Component.

Online Demo

https://pagination.storybook.gemcook.com

Installation

npm install --save @gemcook/pagination

yarn add @gemcook/pagination

Usage

SCSS

Import `@gemcook/pagination/lib/styles/index.scss` to your SCSS.

@import '~@gemcook/pagination/lib/styles/index';

Overried Styles

$pagination__main-color: #fa6681 !default;
$pagination__options-active-color: #ecf0f1 !default;

State & Store

  pages: {
    active: [],
    first: [],
    last: [],
    before_distant: [],
    before_near: [],
    after_near: [],
    after_distant: [],
  },
  totalCount: 0,
  totalPages: 0,

Examples

default

<Pagination
  total={1234}
  current={store.state.current}
  pageSize={10}
  changePage={current => {
    store.set({current});
  }}
/>

size of mini

<Pagination
  total={1234}
  current={store.state.current}
  pageSize={10}
  changePage={current => {
    store.set({current});
  }}
  size="mini"
/>

change page size

<Pagination
  total={1234}
  current={store.state.current}
  pageSize={store.state.pageSize}
  changePage={current => {
    store.set({current});
  }}
  showSizeChanger
  changePageSize={(current, pageSize) => {
    store.set({pageSize});
  }}
/>

Documentaion

Props

Parameter	Type	Required	Default	Description
totalCount	number	true	undefined	-
current	number	true	undefined	-
changePage	(current: number) => void	true	undefined	-
pageSize	number	false	10	current page size. It is a required item if `showSizeChanger` is `true`.
showSizeChanger	boolean	false	false	-
changePageSize	(current: number, pageSize: number) => void	false	undefined	Required when 'showSizeChanger' is true.
disabled	boolean	false	false	disabled mode.
size	enum	false	undefined	Enums: `'mini'`
locale	enum	false	'ja_JP'	Enums: `'ja_JP'` `'us_EN'`
scrollTop	boolean	false	false	-

API

makeLocalActive

'makeLocalActive' generates 'activeData' from the target data.

args

makeLocalActive(
  data: Array<Object>,
  current: number,
  pageSize: number,
): Array<Object>

makeRemoteActive

'makeRemoteActive' generates 'activeData' from the target data.

args

makeRemoteActive(
  pages: Object,
  current: number,
  nextCurrent: number,
  totalPages: number,
): Array<Object>

makeRemoteActiveWithImmutable

'makeRemoteActiveWithImmutable' generates 'active' from the target data.
Return 'Record' of 'immutable.js'

args

makeRemoteActiveWithImmutable(
  state: any,
  keyPathToPages: [string],
  current: number,
  nextCurrent: number,
  totalPages: number,
): Array<Object>