theme-ui link

[denzo]

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

[TylerBarnes]

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?

[denzo]

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?

[TylerBarnes]

@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} />

[TylerBarnes]

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.

https://theme-ui.com/recipes/gatsby-link/

[TylerBarnes]

You can use the sx prop directly on <TransitionLink /> since it passes all props down onto it's internal Gatsby Link.

[Rattlehead15]

@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