Link processor

When fetching content from a page and parsing it with Html2React that doesn’t seem to take care of links.
They are still going to work as normal anchors that are going to make a full http request. We of course dont want that.
I created a small processor that uses the <Link/> component and wanted to share, maybe someone finds it usefull.

const { Link } = libraries.components

export const spaLinks = {
  name: "SPA links",
  priority: 10,
  // Only process the node it if it's an anchor and href starts with http.
  test: ({ node }) => node.component === "a" && node.props.href ,
  // Add the target attribute.
  processor: ({ node }) => {
    node.props.link = node.props.href
    node.component = Link
    return node;
  },
};
4 Likes