react-components-in-markdown

react-in-markdown

Updated react-in-markdown from Kitze.io - added JSON/JSObject support in params.

⚠️ Warning: This is not a standalone library, it should be used along with the markdown-to-react-components library

What does it do?

This library allows you to render custom React Components when writing Markdown, using a special syntax.

[emoji]({"code": "fire", "size": 35})
or
[emoji]({code: "fire", size: 35})

This will render the emoji component, with {code:"fire", size:"35"} as props.

How does rendering Markdown to React work?

In order to render Markdown to React components you should use the markdown-to-react-components library. Under the hood it's really simple, it uses marked to parse a string that contains Markdown, and it returns back React components.

The cool thing about the MTRC library is the configure method which can customize the output of the components. An example:

import MTRC from 'markdown-to-react-components';

MTRC.configure({
  h1: React.createClass({
    render() {
      return <h1 id={this.props.id} style={{color: 'red'}}>{this.props.children}</h1>
    }
  })
});

How to use react-in-markdown

In order to render custom React components inside of Markdown, you should plug the renderCustomComponents method into the configuration of the a element:

import MTRC from 'markdown-to-react-components';
import {renderCustomComponents} from 'react-in-markdown';

const customComponents = {
	emoji: ({code,size}) => <div style={{fontSize:size}}> {code} </div>,
	awesomeHeader: ({size=22, children}) => <h1> style={{fontSize:size}}>children </h1>
};

MTRC.configure({
  a: props => renderCustomComponents(props, customComponents)
});

So when the parser finds the anchor syntax [emoji]({ code: "fire", size: 35}) it will try to check if emoji is a key in our customComponents object. In this case, emoji is a key in our customComponents object, so it will render that component with the props.

But if we have a regular link like [Kitze.io](http://kitze.io), it will see that Kitze.io isn't a key in the customComponents object so it will just render a regular link 👉 Kitze.io