https://github.com/kitze/react-in-markdown

Render custom React components in Markdown
https://github.com/kitze/react-in-markdown

Last synced: 19 days ago
JSON representation

Render custom React components in Markdown

• Host: GitHub
• URL: https://github.com/kitze/react-in-markdown
• Owner: kitze
• Created: 2016-10-27T09:43:37.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-15T10:41:17.000Z (over 5 years ago)
• Last Synced: 2024-08-08T13:57:25.017Z (about 1 month ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 67
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### 🙋‍♂️ Made by [@thekitze](https://twitter.com/thekitze)  

### Other projects:

- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops

- 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM

- 💻 [Sizzy](https://sizzy.co) - A tool for testing responsive design on multiple devices at once

- 🤖 [JSUI](https://github.com/kitze/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](https://github.com/cerebral/marksy) or [MDX](https://github.com/mdx-js/mdx).

### Usage

It should be used along with the [markdown-to-react-components](https://github.com/christianalfoni/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](https://github.com/christianalfoni/markdown-to-react-components) library. Under the hood it's really simple, it uses [marked](https://github.com/chjj/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:

```js

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

MTRC.configure({

  h1: React.createClass({

    render() {

      return 
{this.props.children}

    }

  })

});

```


### 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:

```js

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

import {renderCustomComponents} from 'react-in-markdown';

const customComponents = {

	emoji: ({code,size}) => 
 {code} 
,

	awesomeHeader: ({size=22, children}) => 
 style={{fontSize:size}}>children 

};


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](http://kitze.io)

### ToDo

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