scrum-lab/react-showdown

Render React components within markdown and markdown as React components!

react-showdown

Render React components within markdown and markdown as React components!

Features

• Render markdown as React components.
• Render React components within the markdown!
• Supports Showdown extensions, like the Twitter Extension and the Youtube Extension.

Installation

npm install --save react-showdown

Use as React component

Really simple markdown example with ES6/JSX:

import { Markdown } from 'react-showdown';

render: () => {
    var markdown = '# Hello\n\nMore content...';
    return <Markdown markup={ markdown } />
}

Use a React component and use it within the markdown with ES6/JSX:

import { Markdown } from 'react-showdown';

const MyComponent extends Component {
	render() {
		return React.createElement(this.props.tag, null, this.props.children);
	}
};

render: () => {
    var markdown = '# Hello\n\n<MyComponent tag="strong">More Content...</MyComponent>';
    return <Markdown markup={ markdown } components={{ MyComponent }} />
}

Use the converter

Really simple markdown example:

var Converter = require('react-showdown').Converter;
var converter = new Converter();

var markdown = '# Hello\n\nMore content...';
var reactElement = converter.convert(markdown);

Use a React component and use it within the markdown:

var MyComponent = React.createClass({
	render: function() {
		return React.createElement(this.props.tag, null, this.props.children);
	}
});

var Converter = require('react-showdown').Converter;
var converter = new ReactShowdown.Converter({ components: { 'MyComponent': MyComponent }});

var markdown = '# Hello\n\n<MyComponent tag="strong">More Content...</MyComponent>';
var reactElement = converter.convert(markdown);

Available props / converter options

Converter options will be pushed forward to the showdown converter, please checkout the valid options section.

Just the components option is managed by this converter. It define the component name (tag name) to component React class definition (instance of React.createClass) mapping. See example above.

Credits

Project is based on the markdown parser Showdown and the "forgiving" htmlparser2.

Alternatives

• reactdown
• react-markdown, based on commonmark.js
• commonmark-react-renderer, based on commonmark.js