How to use react-markdown to create custom React components

Are you using a CMS which provides data to the React/Next frontend ?

Did you ever want to create custom components and render them in a custom way in React but had no idea how to do it?

If both answers are yes keep reading.

I will show you very fast how to create your own custom components using react-markdown which also supports html rendering.

Our custom “product” component

Let us assume that your CMS returns for the post content the following result string

You notice that I am using the product html element which does not exist by default.

We will handle and render it accordingly with the react-markdown library.

The react-markdown library can handle both html with rehype and markdown so do not get confused, we can use markdown but are not forced. I am using html here.

Install in your react application

Your Post.tsx file will look like:

Then you will see in the frontend the custom element you return for the custom product html tag!

That is all, now you can create your custom components from the cms and render them according to your wishes in React.