Setting up Remark and GFM in React

Install dependencies

npm i react-markdown

Optionally install Remark plugins

npm i remark-gfm remark-breaks

Use the <Markdown /> component to render Markdown content:

import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import remarkBreaks from "remark-breaks";

import { MyCustomLink } from "@/components/my-custom-link";

type MarkdownViewProps = {
  content: string;
}

export function MarkdownView({ content }: MarkdownViewProps) {
  return (
    <Markdown
      // Optionally install plugins
      remarkPlugins={[remarkGfm, remarkBreaks]}
      // Optionally provide a component map
      components={{
        a: MyCustomLink,
      }}
    >
      {content}
    </Markdown>
  )
}

See react-markdown

See remark-gfm

See remark-breaks