diff --git a/README.md b/README.md index 8ba7b75..5073f8f 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,12 @@ npm install --save react-remarkable ```jsx import React from 'react'; import Markdown from 'react-remarkable'; +import Emoji from 'remarkable-emoji' const MyComponent = () => (
{/* Pass Markdown source to the `source` prop */} - + {/* Or pass it as children */} {/* You can nest React components, too */} @@ -39,6 +40,7 @@ Available props: - `options` - Hash of Remarkable options - `source` - Markdown source. You can also pass the source as children, which allows you to mix React components and Markdown. - `container` - Element to use as container. Defaults to `div`. +- `plugins` - Array of remarkable plugins ## Syntax Highlighting diff --git a/src/index.js b/src/index.js index 44efa45..c15f7a3 100644 --- a/src/index.js +++ b/src/index.js @@ -47,7 +47,7 @@ class Remarkable extends React.Component { componentWillUpdate(nextProps, nextState) { if (nextProps.options !== this.props.options) { - this.md = new Markdown(nextProps.options); + this.md = this.createMarkdown(nextProps.options, nextProps.plugins); } } @@ -71,17 +71,24 @@ class Remarkable extends React.Component { renderMarkdown(source) { if (!this.md) { - this.md = new Markdown(this.props.options); + this.md = this.createMarkdown(this.props.options, this.props.plugins); } return this.md.render(source); } + + createMarkdown(options, plugins) { + return plugins.reduce((md, plugin) => { + return md.use(plugin); + }, new Markdown(options)); + } } Remarkable.defaultProps = { container: 'div', contentWrapper: 'span', options: {}, + plugins: [], }; export default Remarkable;