React Markdown - How to render custom shortcode into component

Question

I am using React Markdown (https://github.com/rexxars/react-markdown) to render markdown content.

I'd like to ask how to render specific shortcode that we define in the markdown.

For example, in my markdown content, I could insert this shortcode [[ table product="mask" ]]

Then the React Markdown component could pick it up, and render a custom component that I've defined before (such as <Table product="mask" />).

I've read through the documentation but could not find any. Please let me know if you have experience doing this before.

Thank you so much.

Answer 1

You will need the remark-shortcodes plugin and define a renderers field to tell ReactMarkdown what to do with your shortcodes:

const YourComponent = (content: string) => (
      <ReactMarkdown
        source={content}
        plugins={[
          [require("remark-shortcodes"), {startBlock: "[[", endBlock: "]]", inlineMode: true }]
        ]}
        renderers={{ shortcode: Shortcode }}
      />
)

const Shortcode = (props: any) => {
  /*
  props will looks something like:
    {
      "type": "shortcode",
      "identifier": "MailchimpForm",
      "attributes": { "id": "chfk2" }
    }
  see: https://github.com/djm/remark-shortcodes
  */
  switch (props.identifier) {
    case 'table':
      return <Table .../>;
    default:
      throw new Error('unknown shortcode')
  }
};

You might or might not need the startBlock, endBlock, and the inlineMode options depending on what you are building.