使用したライブラリ
react-paginateを使用しました。
Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたのでこのライブラリを選びました。
このライブラリを使ってよかったと思うこと
- インポートが楽
- クラス名など、カスタマイズできる範囲が大きい
まずはインストール
ターミナルで、該当フォルダにてインストールしてください。
npm i react-paginate対象のファイルにインポート・諸々の調整
ページネーションを付けたいファイル・コンポーネントに読み込みます。説明したい部分にコメントを付けているので、コードと一緒に確認してください。
ちなみに、以下の実装方法は事前にすべてのデータを取得して、フロント側で分解して表示するやり方です。毎回取得する方法を行いたい場合は、こちらのコードが参考になるかと思います。
import React, { useState } from 'react';
import ReactPaginate from 'react-paginate'; // インポートはこれで完了！
const App = () => {
const [ offset, setOffset ] = useState(0); // 何番目のアイテムから表示するか
const perPage: number = 5; // 1ページあたりに表示したいアイテムの数
// クリック時のfunction
const handlePageChange = (data) => {
let page_number = data['selected']; // クリックした部分のページ数が{selected: 2}のような形で返ってくる
setOffset(page_number*perPage); // offsetを変更し、表示開始するアイテムの番号を変更
}
return (
<>
<div>
{InfoList
.slice(offset, offset + perPage) // 表示したいアイテムをsliceで抽出
.map((el)=>{
return (
<div>
<p>{el.name}</p>
</div>
)
})}
</div>
{/* ページネーションを置きたい箇所に以下のコンポーネントを配置 */}
<ReactPaginate
previousLabel={'<'}
nextLabel={'>'}
breakLabel={'...'}
pageCount={Math.ceil(Infolist.length/perPage)} // 全部のページ数。端数の場合も考えて切り上げに。
marginPagesDisplayed={2} // 一番最初と最後を基準にして、そこからいくつページ数を表示するか
pageRangeDisplayed={5} // アクティブなページを基準にして、そこからいくつページ数を表示するか
onPageChange={handlePageChange} // クリック時のfunction
containerClassName={'pagination'} // ページネーションであるulに着くクラス名
subContainerClassName={'pages pagination'}
activeClassName={'active'} // アクティブなページのliに着くクラス名
previousClassName={'pagination__previous'} // 「<」のliに着けるクラス名
nextClassName={'pagination__next'} // 「>」のliに着けるクラス名
disabledClassName={'pagination__disabled'} // 使用不可の「<,>」に着くクラス名
/>
</>
)
}そのほか、使用可能はPropsについては、こちらのページで紹介されているので、必要に応じてご確認ください。
実装したスタイルを紹介
どシンプルですが、こんなスタイルにしました。「２」はホバー時のスタイリングです。
実際のCSS（Sass記法）はこちら。参考にしてみてください。aタグを大きくして、クリック範囲を大きくしたかったので、背景の白色はbefore要素で実装しました。
.pagination {
display: flex;
margin: 0 auto;
& > li {
margin: 0 12px;
& > a {
position: relative;
font-size: 0.8rem;
width: 24px;
height: 24px;
outline: none;
z-index: 100;
cursor: pointer;
&::before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: -100;
}
&:hover {
&::before {
background-color: rgba(255, 255, 255, 0.6);
}
}
}
&.active {
& > a::before {
background-color: $white;
}
}
}
&__previous,
&__next {
& > a {
font-size: 0.7rem;
}
}
&__disabled {
display: none;
}
}
