How to use Ellipsis in react-bootstrap pagination


Hi i am using react pagination and its working fine and using pagination with apis. but not getting in proper way. when i am using {paginationItems} then its show all pages in one line and i want to use this in Ellipsis

This result i am getting
enter image description here

This result i want
enter image description here

My code

import React, { useEffect, useState, useMemo } from "react";
import Pagination from "react-bootstrap/Pagination";

    const PaginationComponent = ({
      total = 0,
      itemsPerPage = 10,
      currentPage = 1,
      onPageChange,
    }) => {
      const [totalPages, setTotalPages] = useState(0);
    
      useEffect(() => {
        if (total > 0 && itemsPerPage > 0)
          setTotalPages(Math.ceil(total / itemsPerPage));
      }, [total, itemsPerPage]);
    
      const paginationItems = useMemo(() => {
        const pages: any = [];
    
        for (let i = 1; i <= totalPages; i++) {
          pages.push(
            <Pagination.Item
              key={i}
              active={i === currentPage}
              onClick={() => onPageChange(i)}
            >
              {i}
            </Pagination.Item>
          );
        }
    
        return pages;
      }, [totalPages, currentPage]);
    
      if (totalPages === 0) return null;
    
      return (
        <Pagination className="paginationInfo">  
          <Pagination.Prev
            onClick={() => onPageChange(currentPage - 1)}
            disabled={currentPage === 1}
          />
          {paginationItems}
          <Pagination.Next
            onClick={() => onPageChange(currentPage + 1)}
            disabled={currentPage === totalPages}
          />
        </Pagination>
      );
    };
    
    export default PaginationComponent;

Source: React – Stack Overflow

November 20, 2021
Category : News
Tags: pagination | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.