Markdown Content

MarkdownContent is a content component that will transform a Markdown string into Atom Learning design system components.

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)
`}
/>

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 className="text-danger">{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
    }
  }}
/>

API Reference