How to transform a markdown string to be used in a React component

[thammarith]

Hi, I'm having a string, let's say it's

const copyrightText = '© 2022 [John Doe](https://example.com)';

and I want to use this in a React component so that it's rendered to a working link like this:

<footer>
    <SomeComponentThatTakesMdString content={copyrightText} />
    <div>...</div>
</footer>

How can I use MDX to create that <SomeComponentThatTakesMdString />?

I know that I can use Remark or @mdx-js/runtime, but @mdx-js/runtime says this is not the preferred way to use MDX. I'm wondering if there is a better way?

The reason that I want to use only MDX without another lib is because I'm already using MDX in other parts of the web and I don't want to unnecessarily install another lib.

The docs I read is about taking the whole MDX file to render, but I just want to render only a string in my case.

Thanks!

[wooorm]

• There is no need to use MDX for this. MDX is way more powerful and heavy that this. If you already use MDX, you are likely using MDX in your build tools, which is not the same as shipping it to the frontend and shipping it to every user
• @mdx-js/runtime is old, you can use evaluate from @mdx-js/mdx 2, this is documented in several places including the getting started docs

[wooorm]

Yes. See the options of evaluate and compile.