https://github.com/rafgraph/react-markdown-tree
Renders markdown as React components and never uses dangerouslySetInnerHTML
https://github.com/rafgraph/react-markdown-tree
Last synced: 11 months ago
JSON representation
Renders markdown as React components and never uses dangerouslySetInnerHTML
- Host: GitHub
- URL: https://github.com/rafgraph/react-markdown-tree
- Owner: rafgraph
- License: mit
- Created: 2017-05-08T17:36:51.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2020-10-02T02:41:16.000Z (over 5 years ago)
- Last Synced: 2025-06-04T19:07:47.883Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-markdown-tree.rafgraph.dev
- Size: 621 KB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Markdown Tree
[Demo website](https://react-markdown-tree.rafgraph.dev) (demo code on [`gh-pages` branch](https://github.com/rafgraph/react-markdown-tree/tree/gh-pages))
React Markdown Tree renders markdown as customizable React components and *never* uses `dangerouslySetInnerHTML`.
- Renders markdown according to the [CommonMark spec](https://commonmark.org/) (powered by [`commonmark.js`](https://github.com/jgm/commonmark.js) and [`commonmark-react-renderer`](https://github.com/rexxars/commonmark-react-renderer)).
- Create your own renderers as React components for custom styling or use [`react-markdown-tree-config-default`](https://github.com/rafgraph/react-markdown-tree-config-default) for zero setup default styling with syntax highlighting.
- Easy to use provider/child pattern - set the config once in `` and use `` anywhere in your app with zero props.
```shell
$ yarn add react-markdown-tree
# OR
$ npm install --save react-markdown-tree
```
```shell
# to use with the default config:
$ yarn add react-markdown-tree-config-default
# OR
$ npm install --save react-markdown-tree-config-default
```
```js
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(
,
document.getElementById('root'),
);
```
```js
// App.js or any component that is a child of
import { Markdown } from 'react-markdown-tree';
...
render() {
return (
{this.state.stringInMarkdownFormat /* any string containing the markdown source to render */}
);
}
```
You can also use the UMD build that's available from Unpkg:
```html
```
## API
### ``
#### `children: string`
- String containing the markdown source to render
- Not required, but if not provided `` 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 `
` container, `'section'` will render a `` container, etc...
- By default the container is rendered as a ``
- 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
- `# Some Heading` will render on the page as `
Some Heading
`
### ``
#### `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 `` is mounted, and you cannot change the config once it has been set.
- For a reference config with unstyled renderers see [`referenceMarkdownConfigWithUnstyledRenderers.js`](https://github.com/rafgraph/react-markdown-tree/blob/main/reference/referenceMarkdownConfigWithUnstyledRenderers.js)
```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
// see API for prop definitions
},
};
```