Skip to content
Coding4GaiAmaOpen Source straight from the jungle

# a universal gatsby-link wrapper

I made a <Link/> component cause I didn’t want to have to switch between gatsby-link and <a/> nor remember all the props like target="_blank" and rel="noopener noreferrer". 1

Basically it’s doing automagical stuff so I don’t have to think 🤓

  • Uses Gatsby’s <Link/> for all internal links otherwise a normal <a/>.
  • Sets the activeClassName prop if it’s internal and well active 😉
  • External links will automatically open in a new tab via target="_blank".
  • And to safe us all rel="noopener noreferrer"1 will be set as well 🙌
  • The url can be defined via href or to, so I don’t have to think again 🤯
  • Lets me define a title otherwise uses the url.
  • Ensures an external link is not just an anchor.
  • Accepts a variant string, used to style the link via Theme UI.
  • I can manually set a link to be external or not.
  • Passes all other props to the html element.
  • All props can be overriden as {...props} are passed last.

🚀

All links in markdown will use my <Link/> component via gatsby-plugin-theme-ui

components.js
JavaScript
import { Link } from 'components/Link'
export default {
a: Link,
Link,
}

Now you may understand why it accepts both href and to 😉

It used to also set nofollow, I just removed it tho. I don’t remember when nor why I added it actually and currently I think it’s nice to share link juice. Even tho this blog is still not relevant^^

Would it make sense to have such a component available via npm, or is it too specific? I mean I think I’m going to publish it someday anyway, most probably scoped, as I don’t want to miss it anymore. 💛 Now that I’ve remembered myself, I’ll probably publish it sooner than later 😅

I wish everyone a beautiful and relaxing weekend 😘

Share

Can Rau

Open Source & Rainforest Maintainer at GaiAma.org 🌴