Narcissistic Pickle Meister

    @gemcook/pagination
    TypeScript icon, indicating that this package has built-in type declarations

    1.21.0 • Public • Published

    @gemcook/pagination


    npm version

    React Pagination Component.

    Online Demo

    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.

    Keywords

    none

    Install

    npm i @gemcook/pagination

    DownloadsWeekly Downloads

    0

    Version

    1.21.0

    License

    MIT

    Unpacked Size

    879 kB

    Total Files

    43

    Last publish

    Collaborators

    • tfrcm
    • k.okayama
    • s.nishimura
    • gcshiro