Miss any of our Open RFC calls?Watch the recordings here! »

@instamotor-labs/react-showdown

1.6.0 • Public • Published

react-showdown Build status Test coverage Dependency Status

Render React components within markdown and markdown as React components!

Features

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

Install

npm i @instamotor-labs/react-showdown

DownloadsWeekly Downloads

24

Version

1.6.0

License

MIT

Last publish

Collaborators

  • avatar