How to Make a Markdown React Component

In this short post, I am going to show, how can you create Markdown React Component using the markdown-js library.

First, install markdown-js:

npm install --save markdown

Next, build the component:

'use strict';

import React from 'react';
import {markdown} from 'markdown';

export default class Markdown extends React.Component {

render() {
return (
<div
className="markdown"
dangerouslySetInnerHTML={this.createHTML()}
/>
);
}

createHTML() {
return {
__html: markdown.toHTML(this.props.children)
};
}
}

Basic usage:

'use strict';
import React from 'react';
import Markdown from './Markdown';
export default class extends React.Component {
  render() {
const content =
`#header
paragraph`;
return (
<Markdown>{content}</Markdown>
);
}
}