Pagination.js

import React from "react";
import { createUltimatePagination, ITEM_TYPES } from "react-ultimate-pagination";
import { Pagination as RBPaginate } from "react-bootstrap";

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const Wrapper = (props) => {
    return <RBPaginate>{props.children}</RBPaginate>;
  };

  const Ellipsis = (props) => {
    return <RBPaginate.Ellipsis disabled={props.disabled} />;
  };

  const FirstPageLink = (props) => {
    return <RBPaginate.First onClick={props.onClick} disabled={props.disabled} />;
  };

  const PreviousPageLink = (props) => {
    return <RBPaginate.Prev onClick={props.onClick} disabled={props.disabled} />;
  };

  const NextPageLink = (props) => {
    return <RBPaginate.Next onClick={props.onClick} />;
  };

  const LastPageLink = (props) => {
    return <RBPaginate.Last onClick={props.onClick} disabled={props.disabled} />;
  };

  const Page = (props) => {
    return (
      <RBPaginate.Item active={currentPage == props.value ? true : false} onClick={props.onClick} disabled={props.disabled}>
        {props.value}
      </RBPaginate.Item>
    );
  };

  const UltimatePagination = createUltimatePagination({
    itemTypeToComponent: {
      [ITEM_TYPES.PAGE]: Page,
      [ITEM_TYPES.ELLIPSIS]: Ellipsis,
      [ITEM_TYPES.FIRST_PAGE_LINK]: FirstPageLink,
      [ITEM_TYPES.PREVIOUS_PAGE_LINK]: PreviousPageLink,
      [ITEM_TYPES.NEXT_PAGE_LINK]: NextPageLink,
      [ITEM_TYPES.LAST_PAGE_LINK]: LastPageLink,
    },
    WrapperComponent: Wrapper,
  });

  return <UltimatePagination currentPage={currentPage} totalPages={totalPages} onChange={onPageChange} />;
};

export default Pagination;