[Feature Request] Pagination component custom PaginationItem

[fobaz]

Is your feature request related to a problem? Please describe.

I want to wrap pagination items in or other custom component instead of using onChange event.

Describe the solution you'd like

Would be nice to pass a component to use as PaginationItem, or be able to use "as={CustomComponent}" on PaginationItems.

Describe alternatives you've considered

I have tried overriding renderItem prop, however I lose all the nice original functionality and have to recreate it myself therefore making the component kinda useless.

Screenshots or Videos

No response

[romanticsoul]

+1

[romanticsoul]

That's how I managed to keep the styling and replace the button with a Link.

import { Pagination, PaginationItemType, Button, Link } from "@/ui"

type ContentPaginationProps = {
  page: number
  total: number
}

export function ContentPagination(props: ContentPaginationProps) {
  return (
    <Pagination
      size="lg"
      siblings={2}
      showControls
      total={props.total}
      page={props.page}
      renderItem={(item) => {
        switch (item.value) {
          case PaginationItemType.PREV:
            return (
              <Button
                key={item.key}
                isIconOnly
                onPress={item.onPrevious}
                className={item.className}
              >
                {item.children}
              </Button>
            )

          case PaginationItemType.NEXT:
            return (
              <Button
                key={item.key}
                isIconOnly
                onPress={item.onNext}
                className={item.className}
              >
                {item.children}
              </Button>
            )

          case PaginationItemType.DOTS:
            return (
              <Button
                key={item.key}
                as={Link}
                rel="canonical"
                href={serialize({ page: item.page })}
                isIconOnly
                className={item.className}
              >
                {item.children}
              </Button>
            )

          default:
            return (
              <Button
                as={item.isActive ? "button" : Link}
                rel="canonical"
                ref={item.ref}
                key={item.key}
                href={`?page=${item.page}`}
                className={item.className}
              >
                {item.children}
              </Button>
            )
        }
      }}
    />
  )
}