Markdown Content

Currently it suppports converts the following Markdown elements into components:

<MarkdownContent
  content={`
## This is a heading 2

This will be a paragraph

[And this will  be a link](https://atomlearning.co.uk)
`}
/>
<MarkdownContent
  content={`
## This is a heading 2

This will be a paragraph

[And this will  be a link](https://atomlearning.co.uk)
`}
/>
Edit me!

Override with custom components

You can override the component MarkdownContent will render for each type by passing an object to the customComponents prop where each key is the name of a Markdown Type (see the table above) and the value is a reference to the component you want to render:

<MarkdownContent
  content="This paragraph will have a red color"
  customComponents={{
    paragraph: ({ node, handleNode }) => (
      <Text css={{ color: 'red' }}>{node.children.map(handleNode)}</Text>
    )
  }}
/>

Markdown directives

The MarkdownContent component supports Markdown directives. There are no directives built in by default, but you can define your own directives by using the customComponents prop.

See the following example that transform the following directive into a Button component:

<MarkdownContent
  content=":button[This is a button]{href=https://atomlearning.co.uk isRounded=true}"
  customComponents={{
    textDirective: ({ node, handleNode }) => {
      const { name, attributes, children } = node

      if (name === 'button') {
        return <Button {...attributes}>{children.map(handleNode)}</Button>
      }

      return null
    }
  }}
/>