coreui / coreui-react

CoreUI React.js UI Components. CoreUI for React.js replaces and extends the Bootstrap javascript. Components have been built from scratch as true React.js hook components, without jQuery and unneeded dependencies.
https://coreui.io/react/docs/getting-started/introduction/
MIT License
681 stars 262 forks source link

Cannot specify as props for `CNavLink` in `CNavItem` #409

Open mst-mkt opened 2 months ago

mst-mkt commented 2 months ago

Environment

Source Code

https://github.com/coreui/coreui-react/blob/2652a91079a79cc484ab2c4de5263563c8fa2fef/packages/coreui-react/src/components/nav/CNavItem.tsx#L18-L33

Description

It is not possible to pass as props to <CNavLink> inside a <CNavItem>, which was previously possible. This makes it impossible to use the Router's <Link> (e.g. <NavLink> from react-router-dom) component within <CNav>.

Problem Explanation

This issue likely occurred due to the following changes: https://github.com/coreui/coreui-react/commit/2652a91079a79cc484ab2c4de5263563c8fa2fef?diff=split&w=0#diff-1e4fdbb5559a22bedb4e23de9ec5e8452d240aef08945cc08c18168f68a051d6L7-R33

The as prop that was previously passed to <CNavLink> as rest is now used in the part that wraps (previously li). This change has caused the as prop to no longer function correctly when passing <Link>.

Proposed Solution

One possible solution is to add a navLinkAs prop, as shown below.

import React, { ElementType, forwardRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'

import { CNavLink, CNavLinkProps } from './CNavLink'

import { PolymorphicRefForwardingComponent } from '../../helpers'

export interface CNavItemProps extends Omit<CNavLinkProps, 'component'> {
  as?: ElementType
  navLinkAs?: ElementType
}

export const CNavItem: PolymorphicRefForwardingComponent<'li', CNavItemProps> = forwardRef<
  HTMLLIElement,
  CNavItemProps
>(({ children, as: Component = 'li', navLinkAs, className, ...rest }, ref) => {
  return (
    <Component className={classNames('nav-item', className)} ref={ref}>
      {rest.href || rest.to ? (
        <CNavLink className={className} as={navLinkAs} {...rest}>
          {children}
        </CNavLink>
      ) : (
        children
      )}
    </Component>
  )
})

CNavItem.propTypes = {
  as: PropTypes.elementType,
  navLinkAs: PropTypes.elementType,
  children: PropTypes.node,
  className: PropTypes.string,
}

If necessary, I can create a PR with the above changes.

github-actions[bot] commented 5 days ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions