react-markdown-tree

Markdown provider and component for React

Usage no npm install needed!

<script type="module">
  import reactMarkdownTree from 'https://cdn.skypack.dev/react-markdown-tree';
</script>

README

React Markdown Tree

Demo website (demo code on gh-pages branch)

React Markdown Tree renders markdown as customizable React components and never uses dangerouslySetInnerHTML.

$ yarn add react-markdown-tree
# OR
$ npm install --save react-markdown-tree
# to use with the default config:
$ yarn add react-markdown-tree-config-default
# OR
$ npm install --save react-markdown-tree-config-default
import React from 'react';
import ReactDOM from 'react-dom';
import { MarkdownProvider } from 'react-markdown-tree';
import markdownConfig from 'react-markdown-tree-config-default';
import App from './App';

ReactDOM.render(
  <MarkdownProvider config={markdownConfig}>
    <App />
  </MarkdownProvider>,
  document.getElementById('root'),
);
// App.js or any component that is a child of <MarkdownProvider>
import { Markdown } from 'react-markdown-tree';
...

render() {
  return (
    <Markdown>
      {this.state.stringInMarkdownFormat /* any string containing the markdown source to render */}
    </Markdown>
  );
}

You can also use the UMD build that's available from Unpkg:

<!-- Available at window.ReactMarkdownTree -->
<script src="https://unpkg.com/react-markdown-tree/dist/react-markdown-tree.min.js"></script>

<!-- Available at window.ReactMarkdownTreeConfigDefault -->
<script src="https://unpkg.com/react-markdown-tree-config-default/dist/react-markdown-tree-config-default.min.js"></script>

API

<Markdown>

children: string

  • String containing the markdown source to render
  • Not required, but if not provided <Markdown> returns null and does not render

as: string | ReactComponent

  • Not required, default is 'div'
  • What the markdown container element is rendered as
  • String as an html tag name, e.g. 'div' will render a <div> container, 'section' will render a <section> container, etc...
  • By default the container is rendered as a <div>
  • If you provide a ReactComponent instead of a string, the rendered markdown will be passed down as an array of children to that component

...rest

  • All other props will be passed down to the markdown container element, e.g. className, style, etc...

For Example

  • <Markdown as="section" className="some-markdown"># Some Heading</Markdown> will render on the page as <section class="some-markdown"><h1>Some Heading</h1><section/>

<MarkdownProvider>

config: object

  • Not required, but if it is not provided unstyled html will be rendered
  • Object with keys for renderers and containerProps
  • Note that you can only set the config once when the <MarkdownProvider> is mounted, and you cannot change the config once it has been set.
  • For a reference config with unstyled renderers see referenceMarkdownConfigWithUnstyledRenderers.js
const config = {
  renderers: {
    Heading: /* ReactComponent */,
    Paragraph: /* ReactComponent */,
    Link: /* ReactComponent */,
    Image: /* ReactComponent */,
    List: /* ReactComponent */,
    Item: /* ReactComponent */,
    BlockQuote: /* ReactComponent */,
    Emph: /* ReactComponent */,
    Strong: /* ReactComponent */,
    Softbreak: /* ReactComponent */,
    Linebreak: /* ReactComponent */,
    ThematicBreak: /* ReactComponent */,
    Code: /* ReactComponent */,
    CodeBlock: /* ReactComponent */,
  },
  containerProps: {
    // default props passed down to every instance of <Markdown>
    // see <Markdown> API for prop definitions
  },
};