React-markdown: Headers

[kennetpostigo]

Hey,

I want to swap out the header component for my own, but I see all heading are grouped under:
Heading - (h1, h2, etc.)

Is there a way to only swap out specific headings like only h1? because it overrides the other heading elements.

[rexxars]

Default renderers are exposed on .renderers, so you should be able to do (untested):

const Markdown = require('react-markdown');

function HeadingRenderer(props) {
  if (props.level === 1) {
    return <h1>{props.children}</h1>
  }

  const Heading = Markdown.renderers.Heading
  return <Heading {...props} />
}

<Markdown
  source="# Some heading!\n\nAnd a paragraph"
  renderers={{Heading: HeadingRenderer}}
/>

[cpBurn]

Got it working with const Heading = Markdown.renderers.heading instead of const Heading = Markdown.renderers.Heading (lower case H).

[Kuboczoch]

I recently got it working with:
renderers={{ heading: HeadingRenderer }} lower case H in heading and also with Markdown.renderers.heading

Basically all thing are now in lower case

[abcd-ca]

Here's an adjustment to @rexxars' version that covers all header levels dynamically:

<ReactMarkdown
  source={source}
  renderers={{
    heading: ({ children, level }) => {
      return (
        <Typography variant={`h${level}` as any}>
          {children}
        </Typography>
      )
    },
    paragraph: Typography
  }}
/>

(The as any part is for Typescript only)