This article has been imported from coding4.gaiama.org and is not necessarily up to date!

https://unsplash.com/photos/kjH2m_tl7Pg

<Link/> a universal gatsby-link wrapper

Last updated: 
Published: 

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".

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" 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

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 😘

More info on reverse tabnapping

Can Rau
Can Rau

Doing web-development since around 2000, building my digital garden with a mix of back-to-the-roots-use-the-platform and modern edge-rendered-client-side-magic tech 📻🚀

Living and working in the tropical rainforest of Perú 🐒