@payfit/unity-components
Version:
54 lines (53 loc) • 2.15 kB
TypeScript
import { AnyRouteMatch, LinkOptions } from '@tanstack/react-router';
export interface BreadcrumbItem extends LinkOptions {
id: string;
label: string;
}
export interface UseRouteBreadcrumbsOptions {
/**
* Predicate function to filter out routes that should not be included in the breadcrumbs.
* @param match - The current route match in the list of matches.
* @returns True if the route should be included, false otherwise.
*/
filterMatches?: (match: AnyRouteMatch) => boolean;
/**
* Function to customize the label for each breadcrumb item.
* @param match - The current route match in the list of matches.
* @returns The label for the breadcrumb item.
*/
getLabel?: (match: AnyRouteMatch) => string;
}
/**
* Hook that generates breadcrumb items from the current route matches in Tanstack Router.
* Returns an array of breadcrumb items that can be used with the Breadcrumbs dynamic API.
* @param options - Configuration options for filtering and labeling breadcrumbs
* @returns Array of breadcrumb items with label and Tanstack Router link props
* @example
* ```tsx
* import { Breadcrumb, BreadcrumbLink, Breadcrumbs, useRouteBreadcrumbs } from '@payfit/unity-components/integrations/tanstack-router'
*
* function Navigation() {
* const breadcrumbs = useRouteBreadcrumbs({
* getLabel: (match) => match.context?.title ?? match.id
* })
*
* return (
* <Breadcrumbs items={breadcrumbs} wrap="nowrap">
* {item => (
* <Breadcrumb>
* <BreadcrumbLink to={item.to} search={item.search} params={item.params}>
* {item.label}
* </BreadcrumbLink>
* </Breadcrumb>
* )}
* </Breadcrumbs>
* )
* }
* ```
* @remarks
* - Automatically filters out the root route
* - Can be customized with filterMatches to control which routes appear
* - Can be customized with getLabel to control breadcrumb text
* - This hook only works for hierarchical routes, with an explicit parent-child relationship.
*/
export declare function useRouteBreadcrumbs(options?: UseRouteBreadcrumbsOptions): BreadcrumbItem[];