diff --git a/packages/coreui-react/src/components/sidebar/CSidebar.tsx b/packages/coreui-react/src/components/sidebar/CSidebar.tsx index 4e22affd..519bc097 100644 --- a/packages/coreui-react/src/components/sidebar/CSidebar.tsx +++ b/packages/coreui-react/src/components/sidebar/CSidebar.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react' +import React, { ElementType, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react' import { createPortal } from 'react-dom' import PropTypes from 'prop-types' import classNames from 'classnames' @@ -7,8 +7,13 @@ import { CBackdrop } from '../backdrop' import { isInViewport } from '../../utils' import { useForkedRef } from '../../hooks' +import { PolymorphicRefForwardingComponent } from '../../helpers' export interface CSidebarProps extends HTMLAttributes { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as?: ElementType /** * A string of all className you want applied to the component. */ @@ -65,10 +70,14 @@ export interface CSidebarProps extends HTMLAttributes { const isOnMobile = (element: HTMLDivElement) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile')) -export const CSidebar = forwardRef( +export const CSidebar: PolymorphicRefForwardingComponent<'div', CSidebarProps> = forwardRef< + HTMLDivElement, + CSidebarProps +>( ( { children, + as: Component = 'div', className, colorScheme, narrow, @@ -183,7 +192,7 @@ export const CSidebar = forwardRef( return ( <> -

( ref={forkedRef} > {children} -

+ {typeof window !== 'undefined' && mobile && createPortal( @@ -216,6 +225,7 @@ export const CSidebar = forwardRef( ) CSidebar.propTypes = { + as: PropTypes.elementType, children: PropTypes.node, className: PropTypes.string, colorScheme: PropTypes.oneOf(['dark', 'light']), @@ -231,4 +241,4 @@ CSidebar.propTypes = { visible: PropTypes.bool, } -CSidebar.displayName = 'CSidebar' +CSidebar.displayName = 'CSidebar' \ No newline at end of file pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: