Semantic-Org/Semantic-UI-React

import React, { useState, useEffect } from 'react';
import { List, Pagination } from 'semantic-ui-react';

const mockItems = (count) => {
  return new Array(count).fill(0).map(() => Math.floor(Math.random() * 10000));
}

function PaginationExample(props) {
  const [page, setPage] = useState(1);
  const [itemList, setItemList] = useState([]);
  const itemsPerPage = 5

  useEffect(() => {
    setItemList(mockItems(100));
  }, []);

  const setPageNum = (evt, { activePage }) => {
    setPage(activePage);
  };

  const totalPages = itemList.length / itemsPerPage;
  const renderItems = itemList.slice((page - 1) * itemsPerPage, (page - 1) * itemsPerPage + itemsPerPage);

  return (
    <div className='list-container'>
      <List divided>
        {renderItems.map((item, idx) => (
          <List.Item key={idx}>{item}</List.Item>
        ))}
      </List>
      <Pagination
        activePage={page}
        totalPages={totalPages}
        siblingRange={1}
        onPageChange={setPageNum} />
    </div>
  );
}

export default PaginationExample;