(Although this library may be easier for you to integrate while MDX tools get built)

---

react-markings

Markdown in components, components in markdown

• Allows you to write markdown using commonmark.js
• Renders markdown as React elements using commonmark-react-renderer
• Embed React components inside your markdown (in any paragraph position) like this:

import * as React from 'react';
import md from 'react-markings';

function Example() {
  return (
    <pre>
      <code>...</code>
    </pre>
  );
}

export default function ReadMe() {
  return md`
    # react-markings

    > Markdown in components, components in markdown

    - Allows you to write markdown using [commonmark.js](https://github.com/commonmark/commonmark.js)
    - Renders markdown as React elements using [commonmark-react-renderer](https://github.com/rexxars/commonmark-react-renderer)
    - Embed React components inside your markdown (in any paragraph position) like this:

    ${<Example/>}
  `;
}

If you want to customize rendering further, you can use customize to pass your own renderers.

import * as React from 'react';
import md from 'react-markings';

let customMd = md.customize({
  renderers: {
    // customize heading with class
    heading: props => React.createElement('h' + props.level, { className: 'fancy-heading' }, props.children),
  },
});

export default function CustomHeading() {
  return customMd`
    # Fancy Heading
  `;
}