React Component

By Mode.REACT, importing .md returns react property which is renderable React component as well as Mode.VUE_COMPONENT.

Additional dependencies

To use this mode, your project need to be installed @babel/core (opens new window) and @babel/preset-react (opens new window).

react installs both implicitly, for the instance. So you may not install them depends on your project.

import React from 'react'

import { react as Sample } from './sample.md' // <-- THIS

export default function OneComponent() {
  return (
    <div>
      <h1>Content</h1>
      <Sample /> <!-- This renders compiled markdown! -->
    </div>
  );
}

The React component can takes prop for components on markdown

---
title: A frontmatter
description: Having ExternalComponent on the content
---

Hi, I'm a component. <MyDecorator>Apparently, this sentence will be made bold and italic</MyDecorator>

import React from 'react'
import { react as Sample } from './sample.md'

export default function DecoratedMarkdown() {
  const BoldAndItalic = ({children}) => <strong><i>{children}</i></strong>

  return (
    <div>
      <h1>Content</h1>
      <Sample MyDecorator={BoldAndItalic} />
    </div>
  );
}

Then DecoratedMarkdown renders:

<div>
  <h1>Content</h1>
  <p>Hi, I'm a component. <strong><i>Apparently, this sentence will be made bold and italic</i></strong></p>
</div>

MyDecorator isn't the specific name for props. We can specify any external component with PascalCase.