Reactのページ送りライブラリをreact-paginateからrc-paginationに変えた

Reactでページ送りを実装するときに、とりあえず https://www.npmjs.com/ で「react paginate」とかで検索したりgoogle:react paginateでググったりすると、react-paginateってのが出てくるんですよ。 www.npmjs.com

これについて解説しているQiitaの記事もひっかかりやすいし。

react-paginateの問題点

なんで、最初ちろっとreact-paginateを使ってたんだけど、なんかおかしい。何がおかしいって、このライブラリはpage=0がデフォルトになってる。そこは普通page=1でしょうと。これを克服するためになんか±1する箇所がいくつかでてきて「なんじゃこりゃぁ」となってしまった。

なんとかならんのかな～とか思ったけど、ダメっぽい

同じように感じてる人はやっぱりいて、issueがあがってた。 github.com

作者のAdeleDさんも反応してるけど、これはbackward compatibilityなくなっちゃうよねーってことで対応難しそう。４年経っちゃってる。

ということで、rc-pagination

なんか別なのないかなーって探してみた。 www.npmjs.com なんか、こっちの方がWeeklyダウンロードreact-paginateより多いし。やっぱ名称にReact入ってないから日本語の記事が全然ないのかな？

デモとドキュメントはこちら。

使い方

インストールして

 npm i rc-pagination

こんな感じ。 Localeはデフォルトが中国語なので与えてあげないと面食らう。

import Pagination from "rc-pagination"
import PaginationLocale from "rc-pagination/lib/locale/ja_JP"

const pageChange = (page: number, pageSize: number) => {
        console.log(page, pageSize)
}

return (
        <>
            <div>
                <Pagination
                    defaultCurrent={1} // ページの初期値
                    total={items.length} 
                    onChange={pageChange}
                    pageSize={20} // １ページ当たりの件数
                    hideOnSinglePage={true} // ページ送りが不要な場合は表示しない
                    locale={PaginationLocale}
                    prevIcon={<span>&lt;</span>}
                    nextIcon={<span>&gt;</span>}
                />
            </div>

なんか、pageSizeを変えられるようなんだけど、ページ送りのカウントが途中で変わると嫌だよね… 引数は他にもいろいろとあったけど、とりあえず使うのはこれくらいかな。

CSS

とりあえずこれだけ充てれば見栄えるようになった。

/* pagination */
ul.rc-pagination {
  align-items: center;
  background-color: #818cdd;
  display: flex;
  flex-direction: row;
  height: 60px;
  justify-content: center;
  list-style-type: none;
  position: relative;

  >li.rc-pagination {

    &-item,
    &-prev,
    &-next {
      align-items: center;
      color: #FFF;
      cursor: pointer;
      display: flex;
      font-size: 14px;
      height: 40px;
      justify-content: center;
      width: 40px;

      &-active {
        cursor: default;
      }

      &-active {
        border: solid 1px #90959b;
        background-color: #fff;
        border-radius: 40px;
        color: #aaaeb3;
      }
    }

    &-jump-prev,
    &-jump-next {
      button.rc-pagination-item-link {
        border: none;
        background: none;
        color: #fff;

        &:before {
          content: "..."
        }
      }
    }
  }
}