React | Paginateの実装方法 | 修ちゃんの技術資料

インストール
サンプル
公式サイト

インストール

$ npm install react-paginate

1	$ npm install react-paginate

サンプル

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}
        />

      </>
    );
}

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>

</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 (

<ReactPaginate

breakLabel="..."

nextLabel="next >"

onPageChange={handlePageClick}

pageRangeDisplayed={5}

pageCount={pageCount}

previousLabel="< previous"

renderOnZeroPageCount={null}

</>

);

}

公式サイト

react-paginate
https://www.npmjs.com/package/react-paginate

インストール

サンプル

公式サイト

400 Bad Request