Pagination

Source code

import { Pagination } from "rfui-package";

#Basic

<Pagination
  currPage={5}
  itemsPerPage={10}
  totalItems={100}
/>

#With custom href

By default the href will add the page query string parameter to the current URL. If you want to use a custom href, you can use the buildHref prop.

<Pagination
  currPage={5}
  itemsPerPage={10}
  totalItems={100}
  buildHref={(page) => `/items?page=${page}`}
/>

#Controlled

Pass type="button" and onChange to make this a controlled component.

<Pagination
  currPage={5}
  itemsPerPage={10}
  totalItems={100}
  type="button"
  onChange={(newPage) => {
    console.log(newPage);
  }}
/>

#Size

<Stack className="gap-6">
  <Pagination
    size="sm"
    currPage={5}
    itemsPerPage={10}
    totalItems={100}
  />
  <Pagination
    size="md"
    currPage={5}
    itemsPerPage={10}
    totalItems={100}
  />
  <Pagination
    size="lg"
    currPage={5}
    itemsPerPage={10}
    totalItems={100}
  />
</Stack>

#Disabled

<Pagination
  disabled={true}
  currPage={5}
  itemsPerPage={10}
  totalItems={100}
/>

#Props

Prop	Required	Default	Type and notes
`currPage`		-	`number`
`itemsPerPage`		-	`number`
`totalItems`		-	`number`
`type`	-	`"link"`	`"link" \| "button"`
`buildHref`	-	-	`(page: number) => string`
`onChange`	-	-	`(newPage: number) => void`
`size`	-	`"md"`	`"sm" \| "md" \| "lg"`
`disabled`	-	`false`	`boolean`
`...rest`	-	-	`ComponentProps<"nav">` See the docs for rest parameters. For `Pagination`, you could pass anything you normally would pass to `<nav>` because the container looks something like this: `<nav className={className} {...restWithoutClass}> {children} </nav>`