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.

anyone knows :(

phanatuan
– phanatuan

2020-04-01 16:53:52 +00:00
Commented Apr 1, 2020 at 16:53 — phanatuan
– phanatuan, Commented Apr 1, 2020 at 16:53

Laurent · Accepted Answer · 2020-06-08 17:51:54Z

3

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.

edited Jun 8, 2020 at 17:51

answered Jun 8, 2020 at 9:48

Laurent

1,7982 gold badges15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Emile Esterhuizen Over a year ago

This used to be a great solution, but unfortunately it looks like remark-shortcodes is no longer compatible with react-markdown. I'm battling to find a similar solution using remark-directives

Laurent Over a year ago

Thanks for raising this Emile, I found this issue: github.com/remarkjs/remark/issues/531 which seems to refer to: github.com/landakram/remark-wiki-link. I haven't tested it yet, but this might help you now.

Emile Esterhuizen Over a year ago

I should have followed up on this comment, but I managed to fight my way to a solution, I wrote little about it in case you're interested: stackoverflow.com/questions/66763417/…

Collectives™ on Stack Overflow

React Markdown - How to render custom shortcode into component

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related