theme-ui link
Opened this issue · 6 comments
Firstly, thanks so much for your awesome effort on the transition link!
We've started using https://www.gatsbyjs.org/docs/theme-ui/ and are styling our links using the link component provided by theme-ui https://theme-ui.com/components/link
I was wondering if there's a way for us to use that the link component from theme-ui instead of the link component from gatsby.
Basically, we are looking to replace import { Link } from 'gatsby' with import { Link } from 'theme-ui'
https://github.com/TylerBarnes/gatsby-plugin-transition-link/blob/master/src/components/TransitionLink.js#L3
Interesting use-case! 🤔
I haven't used theme-ui in a project yet so I'm not super familiar with it. Is the Link in theme-ui a Gatsby Link?
Aha, that's a very good question 👌
Turns out it is not 😢
https://github.com/system-ui/theme-ui/blob/master/packages/components/src/Link.js
@TylerBarnes I was wondering if you could share your thoughts on how to go about theme-ui and transitions-link now that we know that theme-ui link is not gatsby link?
@denzo maybe I could expose a new prop for this 🤔 .
Something like:
<TransitionLink ... linkComponent={ThemeUILink} />Then you could make a wrapper component in your project.
export const Link = (props) => <TransitionLink {...props} linkComponent={Link} />Come to think of it you probably don't want to use the theme ui Link at all. It will slow down your site because Gatsby's Link does a lot behind the scenes to preload on hover and some other things.
You can use the sx prop directly on <TransitionLink /> since it passes all props down onto it's internal Gatsby Link.
@denzo maybe I could expose a new prop for this 🤔 .
Something like:
<TransitionLink ... linkComponent={ThemeUILink} />Then you could make a wrapper component in your project.
export const Link = (props) => <TransitionLink {...props} linkComponent={Link} />
This feature would be really useful to me, since I'm trying to get transitionLink to work with gatsby-i18n LocalizedLink