React Markdown Tree
Demo website (demo code on gh-pages
branch)
React Markdown Tree renders markdown as customizable React components and never uses dangerouslySetInnerHTML
.
- Renders markdown according to the CommonMark spec (powered by
commonmark.js
andcommonmark-react-renderer
). - Create your own renderers as React components for custom styling or use
react-markdown-tree-config-default
for zero setup default styling with syntax highlighting. - Easy to use provider/child pattern - set the config once in
<MarkdownProvider>
and use<Markdown>
anywhere in your app with zero props.
$ 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
;;;;; ReactDOM;
// App.js or any component that is a child of <MarkdownProvider>;... { return <Markdown> thisstatestringInMarkdownFormat /* 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 --> <!-- Available at window.ReactMarkdownTreeConfigDefault -->
API
<Markdown>
children: string
- String containing the markdown source to render
- Not required, but if not provided
<Markdown>
returnsnull
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 ofchildren
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
andcontainerProps
- 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 ;