Skip to main content

SimplePagination

Description​

A lightweight pagination component that displays item count and provides previous/next navigation. Shows the current count out of total items with chevron buttons for navigating between pages.

Import​

import { SimplePagination } from '@components/common/SimplePagination';

Usage​

import { SimplePagination } from '@components/common/SimplePagination';
import { useState } from 'react';

function ProductList() {
  const [page, setPage] = useState(1);

  return (
    <div>
      {/* Your content here */}
      
      <SimplePagination
        total={150}
        count={20}
        page={page}
        hasNext={true}
        setPage={setPage}
      />
    </div>
  );
}

Props​

NameTypeDefaultDescription
totalnumber-Total number of items (required)
countnumber-Current count of visible items (required)
pagenumber-Current page number (required)
hasNextboolean-Whether there are more pages (required)
setPage(page: number) => void-Callback to update page number (required)

Example: Product Listing​

import { SimplePagination } from '@components/common/SimplePagination';
import { useState } from 'react';

function ProductListing({ products }) {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 20;
  const totalItems = products.length;
  const currentCount = Math.min(currentPage * itemsPerPage, totalItems);
  const hasMorePages = currentPage * itemsPerPage < totalItems;

  return (
    <div>
      <div className="product-grid">
        {/* Display products */}
      </div>
      
      <SimplePagination
        total={totalItems}
        count={currentCount}
        page={currentPage}
        hasNext={hasMorePages}
        setPage={setCurrentPage}
      />
    </div>
  );
}
  • Area - Component container system
  • Image - Optimized image component