Filter and process your <NavLink /> components for better user experience and SEO.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
11Mar 19, 2018Feb 15, 2018Minified + gzip package size for @roast-cms/react-link-filter in KB



GitHub version

▼ Filter and process your <NavLink /> components and <a /> tags for better user experience, security, and SEO.

What does this React component do?

  • Opens all external links in a new tab/window with rel="nofollow noopener noreferrer" (thus giving your users more browsing security and stopping you from loosing your SEO juice automatically).
  • Adds title attribute to all external links and anchor links to help your users what they're getting into, without cluttering your internal links.
  • Treats all of your internal links as relative URLs (for better canonical structure).
  • Fixes invalid links, such as google.com => http://google.com
  • Provides makeRelative utility function that can help you turn all of your absolute links within your domain to relative ones.

What you will need.

# first you'll need the package:
yarn add @roast-cms/react-link-filter

This component assumes that you are using React.js v16+, with react-dom and react-router-dom (from ReactRouter v4).

How to use.

<Link to="https://www.analog.cafe" domain="localhost:3002">External website</Link>

For more detailed examples see /examples folder. In that folder there's a method on how to avoid having to add domain prop every time.


PRs and issue reports are welcome. Please submit all PRs to develop branch. To test, run yarn start

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.