🙋‍♂️ Made by @thekitze

Other projects:

• 🏫 React Academy - Interactive React and GraphQL workshops
• 💌 Twizzy - A standalone app for Twitter DM
• 💻 Sizzy - A tool for testing responsive design on multiple devices at once
• 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

---

react-in-markdown (DEPRECATED)

This library is deprecated and won't be supported anymore. Please use Marksy or MDX.

Usage

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)

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

ToDo

• Eval props after parsing them so we can use integers, booleans, arrays, and objects as props