How do I render Markdown from a React component?

You can use React-Markdown:

const React = require('react')const ReactDOM = require('react-dom')const ReactMarkdown = require('react-markdown')const input = '# This is a header\n\nAnd this is a paragraph'ReactDOM.render(<ReactMarkdown source={input} />, document.getElementById('container'))

Or... You can just create a simple React component that wraps a call to a Markdown parser. There are two very good ones for JavaScript:

• Remarkable
• Marked

Now, you can create a component like this:

var MarkdownViewer = React.createClass({    render: function() {        // pseudo code here, depends on the parser        var markdown = markdown.parse(this.props.markdown);        return <div dangerouslySetInnerHTML={{__html:markdown}} />;    }});

There used to have one already, but it doesn't seem to be maintained anymore: https://github.com/tcoopman/markdown-react

Also, if you need a React Markdown Editor, check out: react-mde. Disclaimer: I am the author.

The package react-markdown with Markdown component will be good choice:

import React from 'react'import Markdown from 'react-markdown'    var src = "# This is markdown document"    React.render(  <Markdown children={src} />,  document.getElementById('root'))

You can write inplace here-docs like this:

<Markdown>  # Header  * dotted lists  * [url](/doc)</Markdown>

It is possible to specify transformers for link-urls and image-urls and much more.

Example of Markdown component that renders html from markdown text, the logic of loading data should be implemented in separate store/parent component/whatever. I am using marked package for converting markdown to html.

import React from 'react';import marked from 'marked';export default class MarkdownElement extends React.Component {  constructor(props) {    super(props);    marked.setOptions({      gfm: true,      tables: true,      breaks: false,      pedantic: false,      sanitize: true,      smartLists: true,      smartypants: false    });  }  render() {    const { text } = this.props,      html = marked(text || '');    return (<div>      <div dangerouslySetInnerHTML={{__html: html}} />    </div>);  }}MarkdownElement.propTypes = {  text: React.PropTypes.string.isRequired};MarkdownElement.defaultProps = {  text: ''};