React | Paginateの実装方法
インストール
|
1 |
$ npm install react-paginate |
サンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
import React, { useEffect, useState } from 'react'; import ReactPaginate from 'react-paginate'; const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]; function Items({ currentItems }) { return ( <> {currentItems && currentItems.map((item) => ( <div> <h3>Item #{item}</h3> </div> ))} </> ); } export default function Paginate(props) { const itemsPerPage = 5; const [itemOffset, setItemOffset] = useState(0); const endOffset = itemOffset + itemsPerPage; console.log(`Loading items from ${itemOffset} to ${endOffset}`); const currentItems = items.slice(itemOffset, endOffset); const pageCount = Math.ceil(items.length / itemsPerPage); const handlePageClick = (event) => { const newOffset = (event.selected * itemsPerPage) % items.length; console.log( `User requested page number ${event.selected}, which is offset ${newOffset}` ); setItemOffset(newOffset); }; return ( <> <Items currentItems={currentItems} /> <ReactPaginate breakLabel="..." nextLabel="next >" onPageChange={handlePageClick} pageRangeDisplayed={5} pageCount={pageCount} previousLabel="< previous" renderOnZeroPageCount={null} /> </> ); } |
公式サイト
react-paginate
https://www.npmjs.com/package/react-paginate
関連記事