title: How to use custom components in react-markdown
body: <p>Context: I have a <a href="https://nextjs.org/" rel="nofollow noreferrer">Next.js</a> site with <a href="https://chakra-ui.com/" rel="nofollow noreferrer">Chakra UI</a>. I have some user provided markdown content that is fetched from an external source (say, GitHub <code>README.md</code> for a repo) at runtime.</p>
  <p>Now, by default, <a href="https://github.com/remarkjs/react-markdown" rel="nofollow noreferrer">react-markdown</a> (based on <a href="https://github.com/remarkjs/remark" rel="nofollow noreferrer">remarkjs</a>) uses the HTML <code>&lt;img&gt;</code> tag for markdown images (<code>![]()</code>). I want to use the <a href="https://nextjs.org/docs/api-reference/next/image" rel="nofollow noreferrer">new <code>&lt;Image /&gt;</code> component released in Next.js 10</a> in the user provided markdown. Additionally, I also would like to replace other tags with corresponding Chakra UI components.</p>
  <p>How do I go about doing this?</p>
  <p><strong>SOLUTION</strong></p>
  <pre class="lang-js prettyprint-override"><code>// utils/parser.tsx
  
  import Image from 'next/image';
  
  export default function ImageRenderer({ src, alt }) {
    return &lt;Image src={src} alt={alt} unsized /&gt;;
  }
  
  </code></pre>
  <p>and then in the required page:</p>
  <pre class="lang-js prettyprint-override"><code>//pages/readme.tsx
  
  import ReactMarkdown from 'react-markdown';
  import imageRenderer from '../utils/parser';
  
  // `readme` is sanitised markdown that comes from getServerSideProps
  export default function Module({ readme }) {
    return &lt;ReactMarkdown allowDangerousHtml={true} renderers={{ image: imageRenderer }} children={readme} /&gt;
  }
  </code></pre>
  <p>same for other elements...</p>