Rc Pagination

The Pagination component enables the user to select a specific info from a range of infos.

Installation

Install the rc-pagination package.

npm i rc-pagination

Create a pagination component, components/pagination.tsx

import React from "react";
import "rc-pagination/assets/index.css";
import RcPagination, {
  PaginationProps as RcPaginationProps,
} from "rc-pagination";
import { cn } from "rizzui";

const paginationStyles = {
  base: {
    item: "[&>.rc-pagination-item>a]:!no-underline [&>.rc-pagination-item>a]:font-medium [&>li.rc-pagination-item]:border-muted [&>.rc-pagination-item:not(.rc-pagination-item-active)]:bg-transparent",
    icon: "[&>.rc-pagination-prev]:align-baseline [&>.rc-pagination-next]:align-baseline",
    outline:
      "[&>.rc-pagination-item]:leading-7 [&>.rc-pagination-item]:border-0",
    jumperDiv:
      "[&>.rc-pagination-options>.rc-pagination-options-quick-jumper]:text-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper]:text-gray-500",
    jumperInput:
      "[&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:!py-[3px] [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:text-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:border-muted [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:ring-0",
  },
  rounded: {
    none: "[&>.rc-pagination-item]:rounded-none [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-none",
    sm: "[&>.rc-pagination-item]:rounded-sm [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-sm",
    md: "[&>.rc-pagination-item]:rounded-md [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-md",
    lg: "[&>.rc-pagination-item]:rounded-lg [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-lg",
    full: "[&>.rc-pagination-item]:rounded-full [&>.rc-pagination-options>.rc-pagination-options-quick-jumper>input]:rounded-full",
  },
  variant: {
    solid: {
      base: "",
      color: {
        primary:
          "[&>.rc-pagination-item-active]:bg-primary [&>.rc-pagination-item-active>a]:!text-primary-foreground [&>li.rc-pagination-item-active]:border-primary [&>.rc-pagination-item-active]:hover:border-primary [&>.rc-pagination-item-active]:focus:border-primary",
        secondary:
          "[&>.rc-pagination-item-active]:bg-secondary [&>.rc-pagination-item-active>a]:!text-secondary-foreground [&>li.rc-pagination-item-active]:border-secondary [&>.rc-pagination-item-active]:hover:border-secondary [&>.rc-pagination-item-active]:focus:border-secondary",
        danger:
          "[&>.rc-pagination-item-active]:bg-red [&>.rc-pagination-item-active>a]:!text-white [&>li.rc-pagination-item-active]:border-red [&>.rc-pagination-item-active]:hover:border-red [&>.rc-pagination-item-active]:focus:border-red",
      },
    },
    flat: {
      base: "",
      color: {
        primary:
          "[&>.rc-pagination-item-active]:bg-primary-lighter [&>li.rc-pagination-item-active]:border-primary-lighter [&>.rc-pagination-item-active>a]:text-primary-dark [&>.rc-pagination-item-active>a]:hover:text-primary-dark [&>.rc-pagination-item-active>a]:focus:text-primary-dark [&>.rc-pagination-item-active]:hover:border-primary-lighter [&>.rc-pagination-item-active]:focus:border-primary-lighter",
        secondary:
          "[&>.rc-pagination-item-active]:bg-secondary-lighter [&>li.rc-pagination-item-active]:border-secondary-lighter [&>.rc-pagination-item-active>a]:text-secondary-dark [&>.rc-pagination-item-active>a]:hover:text-secondary-dark [&>.rc-pagination-item-active>a]:focus:text-secondary-dark [&>.rc-pagination-item-active]:hover:border-secondary-lighter [&>.rc-pagination-item-active]:focus:border-secondary-lighter",
        danger:
          "[&>.rc-pagination-item-active]:bg-red-lighter [&>li.rc-pagination-item-active]:border-red-lighter [&>.rc-pagination-item-active>a]:text-red-dark [&>.rc-pagination-item-active>a]:hover:text-red-dark [&>.rc-pagination-item-active>a]:focus:text-red-dark [&>.rc-pagination-item-active]:hover:border-red-lighter [&>.rc-pagination-item-active]:focus:border-red-lighter",
      },
    },
  },
};

const iconStyles = {
  base: "text-foreground",
  outline: "border border-muted p-[5px]",
  center: "inline-block align-middle",
  rounded: {
    none: "rounded-none",
    sm: "rounded-sm",
    md: "rounded-md",
    lg: "rounded-lg",
    full: "rounded-full",
  },
};

type IconProps = {
  icon: React.ReactNode;
  rounded: keyof typeof iconStyles.rounded;
  outline: boolean;
  className: string;
};

const PrevIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      className
    )}
  >
    {icon || (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={2}
        stroke="currentColor"
        className="m-auto h-4 w-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M15.75 19.5L8.25 12l7.5-7.5"
        />
      </svg>
    )}
  </div>
);

const NextIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      className
    )}
  >
    {icon || (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        strokeWidth={2}
        stroke="currentColor"
        className="m-auto h-4 w-4"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          d="M8.25 4.5l7.5 7.5-7.5 7.5"
        />
      </svg>
    )}
  </div>
);

const JumpPrevIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      !icon && outline && "py-0 leading-[26px]",
      className
    )}
  >
    {icon || "•••"}
  </div>
);

const JumpNextIcon = ({ icon, rounded, outline, className }: IconProps) => (
  <div
    className={cn(
      iconStyles.base,
      outline ? iconStyles.outline : iconStyles.center,
      iconStyles.rounded[rounded],
      !icon && outline && "py-0 leading-[26px]",
      className
    )}
  >
    {icon || "•••"}
  </div>
);

export const localeDefault = {
  items_per_page: "/ page",
  jump_to: "Go to",
  jump_to_confirm: "confirm",
  page: "Page",
  prev_page: "Previous Page",
  next_page: "Next Page",
  prev_5: "Previous 5 Pages",
  next_5: "Next 5 Pages",
  prev_3: "Previous 3 Pages",
  next_3: "Next 3 Pages",
  page_size: "Page Size",
};

export interface PaginationProps extends RcPaginationProps {
  outline?: boolean;
  rounded?: keyof typeof paginationStyles.rounded;
  variant?: keyof typeof paginationStyles.variant;
  color?: keyof typeof paginationStyles.variant.flat.color;
  prevIconClassName?: string;
  nextIconClassName?: string;
  jumpPrevIconClassName?: string;
  jumpNextIconClassName?: string;
}

export default function Pagination({
  outline = false,
  rounded = "md",
  variant = "solid",
  color = "primary",
  locale,
  nextIcon,
  prevIcon,
  prevIconClassName,
  nextIconClassName,
  jumpPrevIcon,
  jumpNextIcon,
  jumpPrevIconClassName,
  jumpNextIconClassName,
  className,
  ...props
}: PaginationProps) {
  return (
    <RcPagination
      locale={locale || localeDefault}
      nextIcon={
        <NextIcon
          icon={nextIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={nextIconClassName as string}
        />
      }
      prevIcon={
        <PrevIcon
          icon={prevIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={prevIconClassName as string}
        />
      }
      jumpPrevIcon={
        <JumpPrevIcon
          icon={jumpPrevIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={jumpPrevIconClassName as string}
        />
      }
      jumpNextIcon={
        <JumpNextIcon
          icon={jumpNextIcon as React.ReactNode}
          rounded={rounded}
          outline={outline}
          className={jumpNextIconClassName as string}
        />
      }
      className={cn(
        paginationStyles.base.item,
        paginationStyles.base.jumperDiv,
        paginationStyles.base.jumperInput,
        !outline && paginationStyles.base.outline,
        !outline && paginationStyles.base.icon,
        paginationStyles.rounded[rounded],
        paginationStyles.variant[variant].base,
        paginationStyles.variant[variant].color[color],
        className
      )}
      {...props}
    />
  );
}

Pagination.displayName = "Pagination";

Default

The default style of Pagination.

import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} defaultCurrent={1} />;
}

Variants

You can change the style of Pagination using variant property.

import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} variant="solid" defaultCurrent={1} />
      <Pagination total={25} variant="flat" defaultCurrent={1} />
    </>
  );
}

Rounded

You can change the border radius of Pagination button / item using rounded property.

import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} rounded="sm" defaultCurrent={1} />
      <Pagination total={25} variant="solid" defaultCurrent={1} />
      <Pagination total={25} rounded="lg" defaultCurrent={1} />
      <Pagination total={25} rounded="none" defaultCurrent={1} />
      <Pagination total={25} rounded="full" defaultCurrent={1} />
    </>
  );
}

Colors

You can change the color of Pagination using color property.

import Pagination from "@components/pagination";

export default function App() {
  return (
    <>
      <Pagination total={25} defaultCurrent={1} />
      <Pagination total={25} color="secondary" defaultCurrent={1} />
      <Pagination total={25} color="danger" defaultCurrent={1} />
    </>
  );
}

Disabled

You can make Pagination disabled using disabled property.

import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} defaultCurrent={1} disabled />;
}

With Outline

You can change the style of Pagination using outline property.

import Pagination from "@components/pagination";

export default function App() {
  return <Pagination total={25} outline={true} defaultCurrent={1} />;
}

With Custom Previous & Next

You can change the style of Pagination using prevIcon & nextIcon property.

Previous
1
•••
3
4
5
6
7
•••
10
Next

import Pagination from "@components/pagination";

export default function App() {
  return (
    <Pagination
      total={100}
      defaultCurrent={5}
      nextIcon="Next"
      prevIcon="Previous"
      prevIconClassName="py-0 text-foreground !leading-[26px]"
      nextIconClassName="py-0 text-foreground !leading-[26px]"
    />
  );
}

With Custom Prev Next Jump

You can change the style of Pagination using jumpPrevIcon & jumpNextIcon property.

import Pagination from "@components/pagination";
import {
  ChevronDoubleRightIcon,
  ChevronDoubleLeftIcon,
} from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Pagination
      outline
      total={100}
      defaultCurrent={5}
      jumpPrevIcon={<ChevronDoubleLeftIcon className="h-4 w-4" />}
      jumpNextIcon={<ChevronDoubleRightIcon className="h-4 w-4" />}
    />
  );
}

API Reference

Pagination Props

Here is the API documentation of the Pagination component.

Props	Type	Description	Default
defaultCurrent	`number`		__
total	`number`		__
variant	`solid` `flat`	These are the variants we support	`"solid"`
rounded	PaginationRounded	Rounded variations are	`"md"`
color	PaginationColors	Change Loader color	`"primary"`
outline	`boolean`	Whether show outline or not	`false`
disabled	`boolean`		__
prevIconClassName	`string`	Pass className for previous icon	__
nextIconClassName	`string`	Pass className for next icon	__
jumpPrevIconClassName	`string`	Pass className for previous icon	__
jumpNextIconClassName	`string`	Pass className for next icon	__
onChange	`((page: number, pageSize: number) => void)`		__
onShowSizeChange	`((current: number, size: number) => void)`		__
itemRender	PaginationItemRender		__
showTotal	PaginationShowTotal		__
className	`string`		__
selectPrefixCls	`string`		__
prefixCls	`string`		__
pageSizeOptions	`string[]` `number[]`		__
current	`number`		__
pageSize	`number`		__
defaultPageSize	`number`		__
hideOnSinglePage	`boolean`		__
showSizeChanger	`boolean`		__
showLessItems	`boolean`		__
showPrevNextJumpers	`boolean`		__
showQuickJumper	`boolean` `object`		__
showTitle	`boolean`		__
simple	`boolean`		__
locale	`PaginationLocale`		__
style	`CSSProperties`		__
selectComponentClass	`ComponentType<{}>`		__
prevIcon	`ReactNode` `ComponentType<{}>`		__
nextIcon	`ReactNode` `ComponentType<{}>`		__
jumpPrevIcon	`ReactNode` `ComponentType<{}>`		__
jumpNextIcon	`ReactNode` `ComponentType<{}>`		__

Note: You can check rc-pagination documentation for more details.

Pagination Rounded

type PaginationRounded = "sm" | "md" | "lg" | "none" | "full";

Pagination Colors

type PaginationColors = "primary" | "secondary" | "danger";

Pagination Item Render

type PaginationItemRender = (
  page: number,
  type: "page" | "next" | "prev" | "jump-prev" | "jump-next",
  element: ReactNode
) => ReactNode;

Pagination Show Total

type PaginationShowTotal = (
  total: number,
  range: [number, number]
) => ReactNode;

Installation​

Default​

Variants​

Rounded​

Colors​

Disabled​

With Outline​

With Custom Previous & Next​

With Custom Prev Next Jump​

API Reference​

Pagination Props​

Pagination Rounded​

Pagination Colors​

Pagination Item Render​

Pagination Show Total​