The link components should have an as prop to allow custom components to be rendered instead of the default <a> tag. This will allow the link components to be used within routing libraries and frameworks which have their own link component.
For example react-router-dom uses their Link component for internal linking between pages. With this prop, the ButtonLink component could be intergrated with react-router-dom as follows:
import {Link} from "react-router-dom";
import {ButtonLinkProps} from "@ben-ryder/jigsaw";
/**
This component acts as an 'adapter', mapping the <ButtonLink> component props to react-rotuer-dom's <Link> component props
**/
export function InternalButtonLink(props: ButtonLinkProps) {
return (
<Link to={props.href} className={props.className}>{props.children}</Link>
)
}
function Example(){
return (
<ButtonLink styling="primary" href="/test" as={InternalLink}>Test</ButtonLink>
)
}
The link components should have an
as
prop to allow custom components to be rendered instead of the default<a>
tag. This will allow the link components to be used within routing libraries and frameworks which have their own link component.For example
react-router-dom
uses theirLink
component for internal linking between pages. With this prop, theButtonLink
component could be intergrated withreact-router-dom
as follows: