How to integrate remark-directive into react-markdown

Here is an example on how to integrate remark-directive with react-markdown. You can include it in your readme if you like.

import ReactMarkdown from "react-markdown";
import directive from "remark-directive";
import visit from "unist-util-visit";

import "./styles.css";

function reactMarkdownRemarkDirective() {
  return (tree) => {
    visit(
      tree,
      ["textDirective", "leafDirective", "containerDirective"],
      (node) => {
        node.data = {
          hName: node.name,
          hProperties: node.attributes,
          ...node.data
        };
        return node;
      }
    );
  };
}

function MyDirective({node, ...props}) {
  return (
    <span className="doSomethingCustom" {...props} />
  );
}

export default function App() {
  return (
    <div className="App">
      <ReactMarkdown
        remarkPlugins={[directive, reactMarkdownRemarkDirective]}
        components={{ MyDirective }}
        children=":MyDirective[Content]{#me}"
      />
    </div>
  );
}

Here is a working version on CodeSandbox