ben-ryder / jigsaw

A design system and component library for use in my personal projects.
https://jigsaw.benryder.dev
GNU General Public License v3.0
0 stars 0 forks source link

Add an `as` prop to link components #25

Closed ben-ryder closed 1 year ago

ben-ryder commented 2 years ago

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>
  )
}
ben-ryder commented 1 year ago

this is now released in v0.8.0