feat(CBreadcrumb): allow to pass custom components as breadcrumb item

coreui · Sep 18, 2024 · b578251 · b578251
1 parent 67106fb
commit b578251
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx b/packages/coreui-react/src/components/breadcrumb/CBreadcrumbItem.tsx
@@ -1,14 +1,22 @@
-import React, { forwardRef, HTMLAttributes } from 'react'
+import React, { ElementType, forwardRef, HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import { CLink } from '../link/CLink'
 
+import { PolymorphicRefForwardingComponent } from '../../helpers'
+
 export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
   /**
    * Toggle the active state for the component.
    */
   active?: boolean
+  /**
+   * Component used for the root node. Either a string to use a HTML element or a component.
+   *
+   * @since 5.4.0
+   */
+  as?: ElementType
   /**
    * A string of all className you want applied to the base component.
    */
@@ -19,26 +27,33 @@ export interface CBreadcrumbItemProps extends HTMLAttributes<HTMLLIElement> {
   href?: string
 }
 
-export const CBreadcrumbItem = forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
-  ({ children, active, className, href, ...rest }, ref) => {
-    return (
-      <li
-        className={classNames(
-          'breadcrumb-item',
-          {
-            active: active,
-          },
-          className,
-        )}
-        {...(active && { 'aria-current': 'page' })}
-        {...rest}
-        ref={ref}
-      >
-        {href ? <CLink href={href}>{children}</CLink> : children}
-      </li>
-    )
-  },
-)
+export const CBreadcrumbItem: PolymorphicRefForwardingComponent<'li', CBreadcrumbItemProps> =
+  forwardRef<HTMLLIElement, CBreadcrumbItemProps>(
+    ({ children, active, as, className, href, ...rest }, ref) => {
+      return (
+        <li
+          className={classNames(
+            'breadcrumb-item',
+            {
+              active: active,
+            },
+            className,
+          )}
+          {...(active && { 'aria-current': 'page' })}
+          {...rest}
+          ref={ref}
+        >
+          {href ? (
+            <CLink as={as} href={href}>
+              {children}
+            </CLink>
+          ) : (
+            children
+          )}
+        </li>
+      )
+    },
+  )
 
 CBreadcrumbItem.propTypes = {
   active: PropTypes.bool,

diff --git a/packages/docs/content/api/CBreadcrumbItem.api.mdx b/packages/docs/content/api/CBreadcrumbItem.api.mdx
@@ -8,5 +8,6 @@ import CBreadcrumbItem from '@coreui/react/src/components/breadcrumb/CBreadcrumb
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **active** | Toggle the active state for the component. | `boolean` | - |
+| **as** **_5.4.0+_** | Component used for the root node. Either a string to use a HTML element or a component. | `(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'li')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 174 more ...` \| `(ElementType & FunctionComponent<...>)` | - |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **href** | The `href` attribute for the inner `<CLink>` component. | `string` | - |