Pagination

Name: Nayan UI
Author: Nayan UI

A Pagination component walks through a result set page by page, showing the current page, its neighbours and the ends of the range with an ellipsis in between. It keeps a long list navigable without loading all of it at once.

Demo

Rendered live, with the same build of the library you install.

Nine pages:

With a summary:

Usage

Source

Pagination.tsx

import { useState } from 'react';
import { NPagination } from '@nayan-ui/react';

const Pagination = () => {
  const [page, setPage] = useState(3);

  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Nine pages:</h3>
      <div className="mb-5">
        <NPagination totalPages={9} currentPage={page} onChange={setPage} />
      </div>

      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">With a summary:</h3>
      <NPagination totalPages={40} currentPage={page} onChange={setPage} showSummary />
    </div>
  );
};

export default Pagination;

Attributes

13 props

Name	Type	Default	Details
totalPages	number	Required	The totalPages prop.
currentPage	number	Required	The currentPage prop.
onChange	(page: number) => void	Required	The onChange prop.
size	'sm' \| 'md' \| 'lg'	'md'	The size prop.
disabled	boolean	false	The disabled prop.
showSummary	boolean	false	The showSummary prop.
summaryText	string	Optional	The summaryText prop.
siblingCount	number	1	The siblingCount prop.
className	string	''	The className prop.
contentClassName	string	''	The contentClassName prop.
linkClassName	string	''	The linkClassName prop.
activeLinkClassName	string	''	The activeLinkClassName prop.
aria-label	string	'Pagination'	The aria-label prop.