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 createClass = require('create-react-class');
var MyComponent = 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

• components: (object or array) Mapping of component name (tag name) to component React class (instance of createClass).

  Object form:

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

  Array form:

  var converter = new ReactShowdown.Converter({
  	components: [{
  		name: 'MyComponent',
  		component: MyComponent,
  		block: true
  	}]
  });

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

Block vs Inline

By default all custom React components are rendered inline in Showdown. For example:

const Component = (props={}) =>
  React.createElement(props.tag, props, props.children);


const Markdown = () => {
  const markdown = '<Component tag="span">Hello<Component>';
  return <Markdown markup={ markdown } components={{ Component }} />
}

renders to:

<p><span>Hello</span></p>

If your React component returns a block level element you will get an error:

const Markdown = () => {
  const markdown = '<Component tag="div">Hello<Component>';
  return <Markdown markup={ markdown } components={{ Component }} />
}

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See p > ... > Component > div.

To avoid this (or if you just don't want your component wrapped in <p> tags) you can use the array form of components and set the block option:

const Markdown = () => {
  const markdown = '<Component tag="div">Hello<Component>';
	const components = [{
		name: 'Component',
		component: Component,
		block: true
	}];
  return <Markdown markup={ markdown } components={ components } />
}

which renders to:

<div><p>Hello</p></div>

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