Help us understand the problem. What is going on with this article?

react-paginateをBootstrap4で使う

概要

Reactでページネーションのコンポーネントを探していて、「react-paginate」というコンポーネントを発見したのですが、2019年5月時点でdemoコードがBootstrap4に対応していませんでした。ので、Bootstrap4に適応するように為のサンプルコードを記載します。

前提など

  • Reactのバージョンは16.8.6を使用しています。また、Reduxを入れた状態で動作は確認しています。
  • Bootstrapのバージョンは4.3.1を使用しています。また、Paginationの仕様についてはPagination · Bootstrapを参照ください。
  • react-paginateは6.3.0を使用しています。react-paginateについてはreact-paginateを参照ください。

表示イメージ

下記のようなイメージで検索結果のページネーションを表示させます。
スクリーンショット 2019-05-10 2.28.57.png

コンポーネントの設定サンプル

Component.js
import React from 'react';
import ReactPaginate from 'react-paginate';

const SearchApp = (props) =>
  (
    <div>
      <ReactPaginate
        pageCount={props.total_results / 20 | 0 + 1}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={props.handlePageClick}
        containerClassName='pagination'
        pageClassName='page-item'
        pageLinkClassName='page-link'
        activeClassName='active'
        previousLabel='previous'
        nextLabel='next'
        previousClassName='page-item'
        nextClassName='page-item'
        previousLinkClassName='page-link'
        nextLinkClassName='page-link'
        disabledClassName='disabled'
        breakLabel='...'
        breakClassName='page-item'
        breakLinkClassName='page-link'
      />
   </div>
)

設定の詳細

項目     設定内容 補足  
pageCount 総ページ数 サンプルでは1ページ20件表示したいので、20で割って小数点以下を切り捨てて1を足してます。   
marginPagesDisplayed 終端に表示する件数        ー           
pageRangeDisplayed 選択位置の前後で表示する件数         ー  
onPageChange ページクリック時にハンドルするメソッド   こんな感じでページ数を受け取ります。indexは0から始まるので1足しています。
export const handlePageClick = (page) => {
  return {
   type:'PAGE_CLICK'
   select_page: page.selected + 1
}};
containerClassName pageのulタグに設定するclass Bootstrap4だとpagination
pageClassName pageのliタグに設定するclass Bootstrap4だとpage-item
pageLinkClassName pageのaタグに設定するclass Bootstrap4だとpage-link
activeClassName 現在activeなpageに設定するclass Bootstrap4だとactive
previousLabel previousに設定するラベル名 任意
nextLabel nextに設定するラベル名 任意
previousClassName previousのliタグに設定するclass Bootstrap4だとpage-item
nextLinkClassName nextのliタグに設定するclass Bootstrap4だとpage-item
previousLinkClassName previousのaタグに設定するclass Bootstrap4だとpage-link
nextLinkClassName nextのaタグに設定するclass Bootstrap4だとpage-link
disabledClassName previous・nextが押せなくなった状態の表示 Bootstrap4だとdisabled
breakLabel pageの省略表示 任意
breakClassName pageの省略表示のulタグに設定するclass Bootstrap4だとpagination
breakLinkClassName pageの省略表示のliタグに設定するclass Bootstrap4だとpage-item
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away