pagination

Certainly! Below is a simple TypeScript React component that provides a paginated list of items.

import React, { useState } from 'react';

type PaginationProps = {
  items: any[]; // Replace `any` with your specific item type
  itemsPerPage: number;
};

const Pagination: React.FC<PaginationProps> = ({ items, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = useState(1);

  const maxPage = Math.ceil(items.length / itemsPerPage);

  const begin = (currentPage - 1) * itemsPerPage;
  const end = begin + itemsPerPage;
  const currentItems = items.slice(begin, end);

  const goToNextPage = () => setCurrentPage((page) => Math.min(page + 1, maxPage));

  const goToPreviousPage = () => setCurrentPage((page) => Math.max(page - 1, 1));

  const goToPage = (page: number) => setCurrentPage(page);

  return (
    <div>
      {/* Item list */}
      {currentItems.map((item, index) => (
        <div key={index}>{item}</div>
      ))}

      {/* Pagination controls */}
      <div>
        <button onClick={goToPreviousPage} disabled={currentPage === 1}>
          Previous
        </button>
        {[...Array(maxPage).keys()].map((pageIndex) => (
          <button
            key={pageIndex}
            onClick={() => goToPage(pageIndex + 1)}
            disabled={pageIndex + 1 === currentPage}
          >
            {pageIndex + 1}
          </button>
        ))}
        <button onClick={goToNextPage} disabled={currentPage === maxPage}>
          Next
        </button>
      </div>
    </div>
  );
};

export default Pagination;

To use this component, you would pass in an array of items and specify how many items you want per page:

const App: React.FC = () => {
  const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7']; // Replace with your items

  return <Pagination items={items} itemsPerPage={2} />;
};

export default App;

The Pagination component calculates the number of pages based on the total number of items and items per page. It then renders the current page's items and displays a list of page numbers as well as Previous and Next buttons to navigate through the pages.

Let me know if you'd like to proceed with the step-by-step explanation!

Alright, let's go through the step-by-step explanation of the pagination component implementation:

1. Define the Component Props:

   • We start by defining the TypeScript type for the props that the Pagination component will accept. The PaginationProps type includes an items array for the list of items we want to paginate and an itemsPerPage number to define how many items to show per page.

2. Component State:

   • Within the Pagination component, we use the useState hook to create a currentPage state variable initialized to 1. This state will track the current page number.

3. Calculate Pagination Details:

   • We calculate the maximum number of pages (maxPage) as the ceiling value of the total number of items divided by the number of items per page. This is done using Math.ceil(items.length / itemsPerPage).

4. Determining the Items to Display:

   • To find out which items to display on the current page, we calculate the starting index (begin) and the ending index (end) of the items for the current page. This is done with basic arithmetic based on the currentPage and itemsPerPage.
   • We then slice the items array from begin to end to get the currentItems, which are the items to display on the current page.

5. Navigation Functions:

   • We define three functions to handle pagination navigation:
     • goToNextPage: Increments the currentPage state, capped at maxPage.
     • goToPreviousPage: Decrements the currentPage state, with a minimum value of 1.
     • goToPage: Sets the currentPage state to a specific page number passed to it.

6. Rendering the Paginated Items:

   • We map over currentItems to render the items that should be visible on the current page. Each item is wrapped in a div and given a key prop for React to track each element efficiently.

7. Rendering Pagination Controls:

   • We render a "Previous" button that calls goToPreviousPage when clicked and is disabled if currentPage is 1.
   • We then use an array created by [...Array(maxPage).keys()] to map through all the page numbers, rendering a button for each page. These buttons call goToPage with the respective page number and are disabled if their page number is the current page.
   • Finally, we render a "Next" button that calls goToNextPage when clicked and is disabled if currentPage is equal to maxPage.

8. Styling and Interaction:

   • Basic inline styles or CSS classes could be added to style the pagination controls and the list of items. Additionally, one might want to add more sophisticated interactions or animations to the pagination transitions.

9. Usage:

   • The Pagination component is used in the App component or any other parent component by passing the items array and the itemsPerPage value as props.

This simple pagination component provides the basic functionality required to navigate through a list of items. It can be expanded with additional features such as page range displays, ellipsis for hidden pages, and so on, depending on the needs of your application.