react-markdown w/ rehype-external-links for opening markdown links in a new tab

react-markdown-external-links.js

/**
 * Uses react-markdown w/ rehype-external-links to demo how to parse markdown
 * so that the links open in a new tab as external links in your react application.
 * React-markdown use to have a property that would allow you
 * to require all links be opened in a new tab but they deprecated it and moved
 * to a more pluggable architecture using rehype and remark. The plugin required
 * for react-markdown is rehype-external-links but the documentation doesn't 
 * explain how to use it with react-markdown. Thus here is an example: 
 * 
 * you can find it here https://www.npmjs.com/package/react-markdown -
 * @note - the original example I found was buried in a github issue and can be found below:
 *    https://github.com/remarkjs/react-markdown/pull/762#issuecomment-1806576871
 *
 */

import React from 'react'; 
import rehypeExternalLinks from 'rehype-external-links'

const MarkdownFeed = ({ props }) => {
  // set it up so only a few of the markdown attributes are allowed
  const allowedElements = ['a', 'link', 'text', 'p', 'bold', 'strong'];

  return (
    <ReactMarkdown
      allowedElements={allowedElements}
      rehypePlugins={[[rehypeExternalLinks, { target: '_blank' }]]}
    >
       {children}
    </ReactMarkdown>
  );
};