Custom components in react-markdown

Question

I would like to create a custom component in react-markdown. Specifically I need to be able to create a tag that will allow me to create a tooltip. E.g. [name]{ tooltip content}. I found a similar solution in the link. Unfortunately the component is created as a regular div and not as my component. I don't know exactly what I did wrong.

my code:

import React from "react";
import styled from "styled-components";

import ReactMarkdown from "react-markdown";

import directive from "remark-directive";
import { visit } from "unist-util-visit";
import { h } from "hastscript/html.js";

const Test = styled.span`
  font-size: 12rem;
  font-family: "DM Serif Display", serif;
`;

const TestComp = ({ ...props }) => {
  return <Test> {props.children}</Test>;
};

const components = {
  myTag: TestComp,
};

// remark plugin to add a custom tag to the AST
function htmlDirectives() {
  return transform;

  function transform(tree) {
    visit(
      tree,
      ["textDirective", "leafDirective", "containerDirective"],
      ondirective
    );
  }

  function ondirective(node) {
    var data = node.data || (node.data = {});
    var hast = h(node.name, node.attributes);

    data.hName = hast.tagname;
    data.hProperties = hast.properties;
  }
}

var markdown =
  ' Some markdown with a :myTag[custom directive]{title="My custom tag"}';

const Text = () => {
  return (
    <ReactMarkdown
      className={"markdown"}
      components={components}
      remarkPlugins={[directive, htmlDirectives]}
      children={markdown}
      linkTarget={"_blank"}
    />
  );
};

export default Text;

Answer 1

I use markdown-to-jsx to use custom component.

https://www.npmjs.com/package/markdown-to-jsx