Как создать простой компонент нумерации страниц в React

ReactJS — популярная интерфейсная среда для написания модульных приложений. Пагинация — это одна из проблем, которая возникает при модульной организации приложений React. Разбивку на страницы можно реализовать с использованием множества разных подходов, но я подумал, что было бы неплохо иметь аккуратный компонент реагирования, который обеспечивает разбивку на страницы «из коробки». Это сделает процесс разработки более плавным, одновременно оградив вас от многих возможных деталей реализации.

Sweet Pagination — это простой компонент нумерации страниц с несколькими полезными функциями. Библиотека работает «из коробки» и не требует сложных настроек. Дальнейшие настройки будут простыми, если вы знаете, как добавлять стили для компонента React.

Как это использовать:

1. Установите и импортируйте компонент нумерации страниц.

import React, { useState } from "react";
import SweetPagination from "sweetpagination";

2. Создайте базовый элемент управления нумерацией страниц для больших данных.

function Items() {
  const [currentPageData, setCurrentPageData] = useState(new Array(2).fill());
  // Example items, to simulate fetching from another resources.
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
  return (
    <div>
      {currentPageData.map((item) => (
        <div>
          <h3>Item #{item}</h3>
        </div>
      ))}
      <SweetPagination
        currentPageData={setCurrentPageData}
        getData={items}
        navigation={true}
        dataPerPage={10}
        getStyle={'my-style'}
      />
    </div>
  );
}

Предварительный просмотр:

Посмотреть на GitHub: https://github.com/jahidulislamzim/sweetpagination .