diff --git a/src/Hyperlink/index.tsx b/src/Hyperlink/index.tsx index 5229f73f8f..5928fab105 100644 --- a/src/Hyperlink/index.tsx +++ b/src/Hyperlink/index.tsx @@ -1,13 +1,17 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { + type BsPrefixRefForwardingComponent as ComponentWithAsProp, + type BsPrefixProps, +} from 'react-bootstrap/esm/helpers'; import { Launch } from '../../icons'; import Icon from '../Icon'; export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab'; export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab'; -interface Props extends Omit, 'href' | 'target'> { +interface HyperlinkProps extends BsPrefixProps, Omit, 'href' | 'target'> { /** specifies the URL */ destination: string; /** Content of the hyperlink */ @@ -27,7 +31,10 @@ interface Props extends Omit, 'href' | 'target' target?: '_blank' | '_self'; } -const Hyperlink = React.forwardRef(({ +type HyperlinkType = ComponentWithAsProp<'a', HyperlinkProps>; + +const Hyperlink: HyperlinkType = React.forwardRef(({ + as: Component = 'a', className, destination, children, @@ -77,7 +84,7 @@ const Hyperlink = React.forwardRef(({ } return ( - (({ > {children} {externalLinkIcon} - + ); }); Hyperlink.defaultProps = { + as: 'a', className: undefined, target: '_self', onClick: () => {}, @@ -111,6 +119,7 @@ Hyperlink.defaultProps = { }; Hyperlink.propTypes = { + as: PropTypes.elementType, /** specifies the URL */ destination: PropTypes.string.isRequired, /** Content of the hyperlink */