Sometimes, we want to render Markdown in a React component.
In this article, we’ll look at how to render Markdown in a React component.
Render Markdown in a React Component
To render Markdown in a React component, we can use the react-markdown library.
To install it, we run:
npm i react-markdown
Then we can render a Markdown string by writing:
import React from "react";
import ReactMarkdown from "react-markdown";
const gfm = require("remark-gfm");
const markdown = `Just a link: https://reactjs.com.`;
export default function App() {
return <ReactMarkdown remarkPlugins={[gfm]} children={markdown} />;
}
We use the ReactMarkdown component with the children prop set to the string with the Markdown content.
The remarkPlugins prop is set to an array with the gfm plugin for parsing Remark Markdown.
Conclusion
To render Markdown in a React component, we can use the react-markdown library.
