Pagination

Pagination renders a responsive page navigation control and delegates link or button rendering to a child render function.

Code

import { Pagination } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Pagination activePage={5} pageCount={12}>
      {(page, props) => (
        <a
          {...props}
          href={page == null ? undefined : `https://example.com/?page=${page}`}
          rel="noopener"
          target="_blank"
        />
      )}
    </Pagination>
  );
}

Buttons

Code

import { Pagination } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Pagination activePage={5} pageCount={12}>
      {(page, props) => (
        <button
          {...props}
          disabled={page == null}
          type="button"
          onClick={() => {}}
        />
      )}
    </Pagination>
  );
}

State Variations

Code

import { Pagination } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:gap-8">
      {Array.from({ length: 12 }, (_, i) => i + 1).map((activePage) => (
        <Pagination activePage={activePage} key={activePage} pageCount={12}>
          {(page, props) => (
            <a
              {...props}
              href={
                page == null ? undefined : `https://example.com/?page=${page}`
              }
              rel="noopener"
              target="_blank"
            />
          )}
        </Pagination>
      ))}
    </div>
  );
}

API

Pagination

Props

activePage

activePage: number

children

children: (page: number | undefined, props: PaginationItemProps) => React.ReactElement

className

className?: string

pageCount

pageCount: number