@payfit/unity-components
Version:
55 lines (54 loc) • 2.98 kB
TypeScript
import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
import { PaginationLinkProps as RawPaginationLinkProps } from '../../../../components/pagination/parts/RawPaginationLink.js';
type PaginationLinkRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawPaginationLinkProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
export type PaginationLinkProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = PaginationLinkRouterProps<TRouter, TOptions>;
/**
* A pagination link component that integrates with Tanstack Router for seamless navigation.
* Provides type-safe, URL-driven pagination with support for preloading and active states.
* @param {PaginationLinkProps} props - Router-based props including 'to', 'search', and pagination-specific props
* @example
* ```tsx
* import { PaginationLink } from '@payfit/unity-components/integrations/tanstack-router'
* import { Pagination, PaginationContent, PaginationItem } from '@payfit/unity-components'
*
* function ProductPagination() {
* const search = useSearch({ from: '/products' })
* const currentPage = search.page || 1
*
* return (
* <Pagination pageCount={10} currentPage={currentPage} onPageChange={handlePageChange}>
* <PaginationContent>
* <PaginationItem>
* <PaginationLink
* to="/products"
* search={{ ...search, page: 1 }}
* value={1}
* isCurrent={currentPage === 1}
* preload="intent"
* >
* 1
* </PaginationLink>
* </PaginationItem>
* </PaginationContent>
* </Pagination>
* )
* }
* ```
* @remarks
* - Automatically applies active styling when isCurrent is true
* - Supports type-safe route parameters and search params with Tanstack Router
* - Enables preload="intent" for data loading before navigation
* - Maintains accessibility with aria-current="page" for current page
* - Works with Pagination context for keyboard navigation support
* - Uses the 'value' prop to identify the page number for the link
* @see {@link PaginationLinkProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/pagination GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
* @see Design docs in {@link https://www.payfit.design/ Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
*/
declare function PaginationLink<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: PaginationLinkProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
declare namespace PaginationLink {
var displayName: string;
}
export { PaginationLink };