Pagination

The RhPagination is a component that provides pagination functionality to display large sets of data on multiple pages. It has various props that can be used to customize the pagination interface and make it easier for users to navigate through the data. By using RhPagination, developers can easily add pagination to their applications.

Usage

Once installed, you can import the RhPagination component in your React application:

copy

import {RhPagination} from "@rhythm-ui/react"

Then, you can use the RhPagination component in your JSX code:

1 - 10 of 100 results

Showing 1 to 10 of 100 results

copy

<RhPagination totalResults={100} resultsPerPage={10} />

Pagination Props

Name	Type	Default	Description
totalResults	number	100	The total number of results
resultsPerPage	number	10	The number of results shown per page
label	boolean	true	log of the pagination (Showing 1-10 of 20 pages)
onChange	(activePage: number) => void		The function executed on the page change
variant	"primary" \| "secondary" \| "default"		variant determines the style of pagination
className	string		ClassName to give custom classes
currentPage	number		page which is currently active
ref	Ref<HTMLDivElement>		Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
key	Key

Primary

Setting the primary variant for pagination enables a user-friendly interface with numbered pages and next/previous buttons, making it easy to navigate through the content and find specific pages.

1 - 10 of 100 results

copy

<RhPagination totalResults={100} resultsPerPage={10} variant="primary" />

Secondary

Setting the secondary variant for pagination will get a simpler interface with next and previous buttons and a read-only page number display, and possibly a total number of items on the page.

1 - 10 of 100 results

Showing 1 to 10 of 100 results

copy

<RhPagination totalResults={100} resultsPerPage={10} variant="secondary" />

Custom With Variables

The RhPagination component can be customized using variables to modify the total results displayed on the page, which will update the pagination interface accordingly. This provides flexibility and control over the pagination system, making it easy to integrate and adapt as needed.

1 - 10 of 100 results

Showing 1 to 10 of 100 results

copy

function CustomWithVariables() {
  const [totalResults, setTotalResult] = useState(100);
  const [currentPage, setCurrentPage] = useState(1);
  return (
    <div className="p-4">
      <RhButton
        onClick={() => {
          setTotalResult((state) => state + 5);
          setCurrentPage(1);
        }}
      >
        Update Total Count
      </RhButton>

      <RhPagination
        variant="default"
        resultsPerPage={10}
        totalResults={totalResults}
        onChange={(state) => setCurrentPage(state)}
        currentPage={currentPage}
      />
    </div>
  );
}