@gemcook/pagination

React Pagination Component.

Online Demo

• https://pagination.storybook.gemcook.com

Installation

npm install --save @gemcook/pagination

or

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>

License

@gemcook/pagination is released under the MIT license.