diff --git a/packages/react-aria-components/docs/Breadcrumbs.mdx b/packages/react-aria-components/docs/Breadcrumbs.mdx index 9ea7e113540..24a23239611 100644 --- a/packages/react-aria-components/docs/Breadcrumbs.mdx +++ b/packages/react-aria-components/docs/Breadcrumbs.mdx @@ -334,6 +334,19 @@ The `className` and `style` props also accept functions which receive states for isCurrent ? 'bg-gray-700' : 'bg-gray-600'} /> ``` +Render props may also be used as children to alter what elements are rendered based on the current state. For example, you could render a link for all the breadcrumb items except the current one. + +```jsx + + {(item) => ( + + {({isCurrent}) => isCurrent ? {item.label} : {item.label}} + + )} + +``` + + The states, selectors, and render props for all components used in `Breadcrumbs` are documented below. ### Breadcrumbs @@ -342,7 +355,9 @@ The states, selectors, and render props for all components used in `Breadcrumbs` ### Breadcrumb -A `Breadcrumb` can be targeted with the `.react-aria-Breadcrumb` CSS selector, or by overriding with a custom `className`. It is rendered as an `
  • ` element, and should contain a ``. It may also include another element such as a [separator icon](#separator-icons). +A `Breadcrumb` can be targeted with the `.react-aria-Breadcrumb` CSS selector, or by overriding with a custom `className`. It is rendered as an `
  • ` element, and should contain a ``. It may also include another element such as a [separator icon](#separator-icons). Breadcrumb support the following states and render props: + + ### Link diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx index 975e4a51266..4dd63f71d71 100644 --- a/packages/react-aria-components/src/Breadcrumbs.tsx +++ b/packages/react-aria-components/src/Breadcrumbs.tsx @@ -12,7 +12,7 @@ import {AriaBreadcrumbsProps} from 'react-aria'; import {Collection, Node} from 'react-stately'; import {CollectionChildren, CollectionProps, createLeafComponent, useCollection} from './Collection'; -import {ContextValue, forwardRefType, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; +import {ContextValue, forwardRefType, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils'; import {filterDOMProps} from '@react-aria/utils'; import {Key} from '@react-types/shared'; import {LinkContext} from './Link'; @@ -67,7 +67,15 @@ function BreadcrumbsInner({props, collection, breadcrumbsRef: const _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs); export {_Breadcrumbs as Breadcrumbs}; -export interface BreadcrumbProps extends StyleProps { +export interface BreadcrumbRenderProps { + /** + * Whether the breadcrumb is for the current page. + * @selector [data-current] + */ + isCurrent: boolean +} + +export interface BreadcrumbProps extends RenderProps { /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */ id?: Key, /** The children of the breadcrumb, typically a ``. */ diff --git a/packages/react-aria-components/src/index.ts b/packages/react-aria-components/src/index.ts index e06560fb6ee..363e7e0dbaf 100644 --- a/packages/react-aria-components/src/index.ts +++ b/packages/react-aria-components/src/index.ts @@ -75,7 +75,7 @@ export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem export {FormValidationContext} from 'react-stately'; export {parseColor, getColorChannels} from '@react-stately/color'; -export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs'; +export type {BreadcrumbsProps, BreadcrumbProps, BreadcrumbRenderProps} from './Breadcrumbs'; export type {ButtonProps, ButtonRenderProps} from './Button'; export type {CalendarCellProps, CalendarProps, CalendarRenderProps, CalendarGridProps, CalendarGridHeaderProps, CalendarGridBodyProps, CalendarHeaderCellProps, CalendarCellRenderProps, RangeCalendarProps, RangeCalendarRenderProps} from './Calendar'; export type {CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxRenderProps, CheckboxProps} from './Checkbox';