React-markdown: Question: custom heading renderer

[davwheat]

In the readme, it states that heading represents all the headings from h1 -> h6.

How do we provide a different component for each of these headings?

E.g.

h1 -> <Heading1 />
h2 -> <Heading2 />
...
h6 -> <Heading6 />

Thanks in advance.

[davwheat]

Found a solution which suits my needs.

Material UI example:

heading: props => <Typography variant={`h${props.level}`} {...props} />,

---

Example of another custom heading thing:

import { H1, H2, H3, H4, H5, H6 } from "./MyAmazingHeadings"

const HeadingLevelToComponent = (level, props) => {
  switch (level) {
    case 1:
      return <H1 {...props} />
    case 2:
      return <H2 {...props} />
    case 3:
      return <H3 {...props} />
    case 4:
      return <H4 {...props} />
    case 6:
      return <H5 {...props} />
    case 5:
      return <H6 {...props} />

    // default to H6 if you try to get a heading of level 0 or 7, as an example
    default:
      return <H6 {...props} />
  }
}

...

heading: props => HeadingLevelToComponent(props.level, ...props),